Skip to content

psenger/scrollup

 
 

Repository files navigation

#ScrollUp 1.1.4 Build Status


##How to use Simply include the jquery.scrollUp.min.js file and place the following in the head of your document (make sure jQuery is included):

Minimum setup

$(function () {
    $.scrollUp();
});

Example with default options

$(function () {
    $.scrollUp({
        scrollName: 'scrollUp', // Element ID
        topDistance: 300, // Distance from top before showing element (px)
        topSpeed: 300, // Speed back to top (ms)
        easingType: 'linear', // Scroll to top easing (see http://easings.net/ )
        animation: 'fade', // Fade, slide, none
        animationInSpeed: 200, // Animation in speed (ms)
        animationOutSpeed: 200, // Animation out speed (ms)
        scrollText: 'Scroll to top', // Text for element
        scrollImg: false, // Set true to use image
        activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
        zIndex: 2147483647 // Z-Index fo the overlay
    });
});

activeOverlay

To create a visible line to help determine an ideal scroll distance from the top, assign a valid CSS colour to the activeOverlay setting. This could be HEX, HSLA or RGB(A). Example: activeOverlay: '#00FFFF'. See the demo for an example .


##Fully Customisable ScrollUp is fully customisable through CSS which makes it simple to fit right into your project. Simply target the scrollUp’s generated ID in your CSS file and set your styles. Below is a basic style example:

#scrollUp {
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background: #555;
    color: #fff;
}

Alter the scrolling animation by adding a 'easingType' see http://easings.net/ to the option.

Use background image

To use a background image instead of text, simple set scrollImg: true. This will allow you to set a background image in your CSS file. Check out the demo for more style and feature examples.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%