Smart Configurable Back To Top Button In jQuery - jquery.gotop.js
File Size: | 3.98 KB |
---|---|
Views Total: | 4780 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Yet another jQuery back to top plugin that enables a highly customizable button to smoothly scroll back to the top of the webpage when clicked.
More Features:
- Auto shows the back to top button on scroll down.
- Auto hides the button when you reach the top of the webpage.
- Can be set to only work on mobile devices.
How to use it:
1. Create an empty element in which you want to display the back to top button.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.gotop.js"></script>
2. Include jQuery library and the jquery.gotop.js
script at the bottom of the webpage.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.gotop.js"></script>
3. Initialize the plugin to generate a default back to top button that displays at the 'Bottom Right' of the webpage.
$('#gotop').gotop();
4. Override the following options to customize the back to top button as per your needs.
$('#gotop').gotop({ // Background color background : '#000', // Icon color color: '#fff', // Rounded button? rounded: true, // width/height width: '45px', height: '45px', // bottom position bottom : '25px', // right position right : '25px', // Window height after which show the button windowScrollShow: 400, // animation speed speed: 800, // custom html for the back to top button customHtml: '', // Show button only on mobile device mobileOnly: false });
This awesome jQuery plugin is developed by tomaggio83. For more Advanced Usages, please check the demo page or visit the official website.