Simple Practical Back To Top Plugin - jQuery goTop.js
File Size: | 10.7 KB |
---|---|
Views Total: | 3770 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

goTop.js is a dead simple and super lightweight jQuery plugin that auto reveals a 'Scroll To Top' button as you scroll to the very bottom of the webpage.
How to use it:
1. Upload the JavaScript, CSS, and font files to your web server.
- iconfont.css (OPTIONAL)
- iconfont.eot (OPTIONAL)
- iconfont.svg (OPTIONAL)
- iconfont.ttf (OPTIONAL)
- iconfont.woff (OPTIONAL)
- jquery.goTop.js (REQUIRED)
2. Add references to the JavaScript and CSS files.
<link rel="stylesheet" href="iconfont.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="jquery.goTop.js"></script>
3. Create an element for the Back To Top button.
<div id="go-top" class="iconfont icon-cc-top"></div>
4. Initialize the plugin to generate a Back To Top button on the webpage.
$(function () { $('#go-top').goTop({ // top offset scrollTop: 100, // scroll speed in milliseconds scrollSpeed: 1000, // fade in/out speed in milliseconds fadeInSpeed: 1000, fadeOutSpeed: 500 }) })
5. The example CSS for the Back To Top button.
#go-top { display: none; font-size: 30px; position: fixed; bottom: 200px; right: 50px; border: 2px solid #333; border-radius: 5px; width: 45px; height: 45px; line-height: 45px; text-align: center; cursor: pointer; }
This awesome jQuery plugin is developed by nekoleamo. For more Advanced Usages, please check the demo page or visit the official website.