jQuery Plugin For Smooth Scroll To Top And Bottom - scrollToTop
File Size: | 6.85KB |
---|---|
Views Total: | 20139 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
scrollToTop is fast jQuery plugin that allows you to scroll to top and bottom of your page with a smooth scrolling effect.
You might also like:
- Simple Back To Top Link
- Simple jQuery Plugin For Scroll To Top Button - scrollToTop
- Smooth Page Scroll to Top with jQuery
- Lightweight Animated Scroll To Top Plugin - scrollUp
- Imageless Top of The Page Plugin For jQuery - iTopPage
- Beautiful Back-To-Top Button
- Simple jQuery Scroll To Top Plugin
- jQuery Scroll To Top and Barcode Plugin
How to use it:
1. Include the jQuery javascript library and jQuery scrollToTop plugin in the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/jquery.totop.js"></script>
2. Create a container for the scroll to top (bottom) panel.
<div id="totopscroller"> </div>
3. Add the following styles to your CSS file.
#totopscroller { position: fixed; right: 30px; bottom: 30px; width: 43px; } #totopscroller div { width: 49px; height: 43px; position: relative; } #totopscroller a { display: none; background: url('totopicons.png'); width: 49px; height: 43px; display: block; text-decoration: none; border: medium none; margin: 0 0 -1px; border: 1px solid #949494; } .totopscroller-top { background-position: 0 0 !important; } .totopscroller-lnk { background-position: 0 -43px !important; } .totopscroller-prev { background-position: 0 -129px !important; position: absolute; top: 0; left: 0; } .totopscroller-bottom { background-position: 0 -86px !important; position: absolute; top: 0; left: 0; }
4. Call the plugin with options.
<script> $(function(){ $('#totopscroller').totopscroller({ link:'https://www.jqueryscript.net' // show a link button }); }) </script>
5. Available options.
<script> $(function(){ $('#totopscroller').totopscroller({ showToBottom: true, showToPrev: true, link: false, linkTarget: '_self', toTopHtml: '<a href="#"></a>', toBottomHtml: '<a href="#"></a>', toPrevHtml: '<a href="#"></a>', linkHtml: '<a href="#"></a>', toTopClass: 'totopscroller-top', toBottomClass: 'totopscroller-bottom', toPrevClass: 'totopscroller-prev', linkClass: 'totopscroller-lnk', }); }) </script>
This awesome jQuery plugin is developed by luciolo. For more Advanced Usages, please check the demo page or visit the official website.