Smart Configurable Back To Top Button In jQuery - jquery.gotop.js

File Size: 3.98 KB
Views Total: 4754
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Smart Configurable Back To Top Button In jQuery - jquery.gotop.js

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.