Material Style Auto Show/Hide Scroll To Top Button - Material ScrollTop
| File Size: | 38.9 KB |
|---|---|
| Views Total: | 8236 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.
