Customizable Fixed Scroll To Top Button With jQuery - toTop.js
File Size: | 6.79 KB |
---|---|
Views Total: | 2489 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
toTop.js is an ultra-light yet fully customizable jQuery plugin that creates a fixed back to top button for smoothly scrolling the page to the top as you're about to reach the bottom of the document.
How to use it:
1. To use this plugin, all you need to do is to include the toTop.js script after jQuery library.
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="dist/toTop.js"></script>
2. And then call the function .toTop()
on the body tag.
$('body').toTop();
3. Customize & stylize the scroll top top with the following options:
$('body').toTop({ // CSS styles for the scroll to top button css: { position: "fixed", right: '2rem', bottom: '1rem', fontSize: '4rem', cursor: 'pointer', color: '#1e1e1e' }, // text for the scroll to top button symbol: '⌃', // animation speed for the scrolling effect scrollUpSpeed: 2000, // distance from top of the webpage to trigger the plugin triggerHeight: 250 });
This awesome jQuery plugin is developed by TiaanDuPlessis. For more Advanced Usages, please check the demo page or visit the official website.