Lightweight, Material Design inspired plugin for scrolling on top of the html page (with jQuery)
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Update Readme Apr 19, 2015
src Issue #9: Remove missing CSS source map declaration. Apr 27, 2018
.editorconfig Add EditorConfig Apr 20, 2015
.gitignore chore(ignore): fix missing icon in node modules Nov 25, 2017
LICENSE Initial commit Apr 19, 2015 Issue #7: Add `Application` section to README. Apr 27, 2018
bower.json Release v0.6.4 Oct 23, 2015
package.json chore(update): release 1.0.1 🚀 Nov 25, 2017

Join the chat at

Material ScrollTop Button

Lightweight, Material Design inspired button for scroll-to-top of the page (jQuery plugin).

Just hit the button to smoothly scroll back to the top of the page. Here's the demo.

  • Lightweight
  • Material Design inspired
  • With ripple effect
  • Smoothly animated
  • Customizable
  • With some useful options...
  • CSS3 (Sass) + jQuery

Demo animation

Demo (example)

Watch this:


Via yarn or npm

yarn material-scrolltop

Via bower

bower install material-scrolltop

Manual install (download)

If you want the latest stable version, get the latest release from the releases page.


Include the files as shown in the code snippets below and you're done.

NOTE: The only dependency for this plugin to work is jQuery library (don't forget!)

In your <head> add:

<!-- Material ScrollTop stylesheet -->
<link rel="stylesheet" href="css/material-scrolltop.css">

Then, before your closing </body> tag add:

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

<!-- material-scrolltop plugin -->
<script src="js/material-scrolltop.js"></script>

<!-- Initialize material-scrolltop with (minimal) -->


Option Type Default Description
revealElement string body Reveal button when scrolling over specific element
revealPosition string top Element position for reveal button ('top' or 'bottom')
padding number 0 Adjusts little ups and downs in scrolling (can be negative number)
duration number 600 Determining how long the animation will run
easing string 'swing' Indicating which easing function to use for the transition animate()
onScrollEnd Function() false A function to call once the animation is complete


$('body').materialScrollTop({   // Scroll to the top of <body> element ...
    padding: 100,               // ... and add padding 100px
    revealElement: 'header',    // Reveal button when scrolling over <header> ...
    revealPosition: 'bottom',   // ... and do it at the end of </header> element
    duration: 600,              // Animation will run 600 ms
    easing: 'swing',            // Do it with swing animation
    onScrollEnd: function() {   // Give me some log when animation ends
        console.log('This is the end, my only friend, the end...');


Colors, sizes and stuff

Using SASS (this file), you can simply edit default styles, colors, position and customize plugin to fit your needs. 👍 (Or just edit directly css stylesheet)



You can change svg icon in src/icons/ directory.

Custom text or sign

  1. Turn off svg icon as sass variable: $mst-icon: false
  2. Build your new stylesheet (now without svg icon)
  3. Put your new sign or text inside html <span> element like this:
<button class="material-scrolltop" type="button">


jQuery 1.7+



Copyright © 2015 Lukas Bartak

Proudly powered by nature, wind, tea and beer ;)

All contents are licensed under the MIT license.