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
Via bower:
bower install material-scrolltopIf 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) -->
<script>
$('body').materialScrollTop();
</script>| 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...');
}
});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.
- Turn off svg icon as sass variable:
$mst-icon: false - Build your new stylesheet (now without svg icon)
- Put your new sign or text inside html
<span>element like this:
<button class="material-scrolltop" type="button">
<span>↑</span>
</button>Watch this: http://bartholomej.github.io/material-scrolltop/
jQuery 1.7+
Copyright © 2015 Lukas Bartak
Proudly powered by nature, wind, tea and beer ;)
All contents are licensed under the MIT license.