Material Style Auto Show/Hide Scroll To Top Button - Material ScrollTop

File Size: 38.9 KB
Views Total: 8178
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Material Style Auto Show/Hide Scroll To Top Button - Material ScrollTop

Material ScrollTop is a lightweight jQuery plugin to create a Material Design-style auto show/hide button which allows you to scroll the page to the top of body element, with a few options for scroll speed, easing animations, top offset, active classes, and a callback function.

How to use it:

1. Include the material-scrolltop.css stylesheet for the basic styles.

<link rel="stylesheet" href="material-scrolltop.css">

2. Create a scroll to top button at the bottom of your web page.

<button class="material-scrolltop" type="button"></button>

3. Include jQuery JavaScript library and the material-scrolltop.js script on the web page.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="material-scrolltop.js"></script>

4. Include the optional jQuery easing plugin if you want more easing animations.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

5. Call the plugin to allow scrolling to the top of <body> element.

$(document).ready(function() {
  $('body').materialScrollTop({
    // OPTIONS HERE
  });
});

6. Options and defaults.

$('body').materialScrollTop({

  // add padding 100px
  padding: 100,           

  // reveal button when scrolling over <header> ...
  revealElement: 'header', 

  // and do it at the end of </header> element
  revealPosition: 'bottom',  

  // Animation will run 600 ms
  duration: 600,              

  // easing animations
  easing: 'swing',        

  // execute a function when animation ends    
  onScrollEnd: function() { 
    console.log('Scroll End');
  }
  
});

Changelog:

v2.0.0 (2020-01-05)

  • Rewritten in Typescript

v1.0.1 (2018-04-27)

  • Remove missing CSS source map declaration.

2015-10-23

  • Fix animation trigger for chrome and firefox

2015-09-10

  • Remove tap highlight color

This awesome jQuery plugin is developed by bartholomej. For more Advanced Usages, please check the demo page or visit the official website.