 |
| Animate Scrolltop Responsive JavaScript With Jquery Plugin |
ScrollTop JS is a jQuery plugin to display an animate 'Back To Top' button which can be shown and hidden automatically when you scroll down or up a web page.
This plugin works to enhance the navigation experience on your long web pages, to work flawlessly on responsive web designs.
How to use it:
1. Include the required stylesheet jquery.scrolltop.css to style the 'back to top' button.
<link rel="stylesheet" href="jquery-scrollbutton.css">
2. Include jQuery library and the jquery.scrolltop.js at the bottom of the webpage.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.scrolltop.js"></script>
3. Initialize the plugin to generate a default 'back to top' button at the bottom of the webpage when you scroll down.
$.scrolltop();
4. Change the default text/icon/symbol inside the 'back to top'.
$.scrolltop({
template: '^'
});
5. Specify the animation speed when scrolling back to the top of the webpage.
$.scrolltop({
duration: 1000
});
6. Add an extra CSS class to the 'back to top' button.
$.scrolltop({
class: 'custom-scrolltop'
});
Live Demo
See the Pen Animate Scrolltop Jquery With JavaScript by Plugin JS (@pluginjs) on CodePen.
File Info
- File Name :
- animate-scrolltop-responsive-jquery-with-javascript.zip
- Size :
- 10.56KB
- Site Download :
- Codepen.io
- Official Website:
- Go to website
- License:
- MIT