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)
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'
});
});
activeOverlay
To create a visible line to help determin 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.
#scrollUp {
bottom: 20px;
right: 20px;
padding: 10px 20px;
background: #555;
color: #fff;
}
Use background image
To use a backgroung 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent