This time I will share jQuery Plugin and tutorial about Material Style Auto Show/Hide Scroll To Top Button – Material ScrollTop, hope it will help you in programming stack.
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.
1 |
< link rel = "stylesheet" href = "material-scrolltop.css" > |
2. Create a scroll to top button at the bottom of your web page.
1 |
< button class = "material-scrolltop" type = "button" ></ button > |
3. Include jQuery JavaScript library and the material-scrolltop.js
script on the web page.
1 |
< script src = "//code.jquery.com/jquery-1.11.2.min.js" ></ script > |
2 |
< script src = "material-scrolltop.js" ></ script > |
4. Include the optional jQuery easing plugin if you want more easing animations.
1 |
< 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.
1 |
$(document).ready( function () { |
2 |
$( 'body' ).materialScrollTop({ |
6. Options and defaults.
01 |
$( 'body' ).materialScrollTop({ |
07 |
revealElement: 'header' , |
10 |
revealPosition: 'bottom' , |
19 |
onScrollEnd: function () { |
20 |
console.log( 'Scroll End' ); |
Changelog:
v2.0.0 (2020-01-05)
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.