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
   
Customizable Fixed Scroll To Top Button With jQuery - toTop.js

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: '&#8963;',

  // 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.