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

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="//"></script>
<script src="material-scrolltop.js"></script>

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

<script src="//"></script>

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

$(document).ready(function() {

6. Options and defaults.

  // 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');

Change log:

v1.0.1 (2018-04-27)

  • Remove missing CSS source map declaration.


  • Fix animation trigger for chrome and firefox


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

  • Publication date: 27.04.2018
  • Source