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

Free Download Material Style Auto Show/Hide Scroll To Top Button – Material ScrollTop

Posted on

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 Style Auto Show Hide Scroll To Top Button Material ScrollTop - Free Download Material Style Auto Show/Hide Scroll To Top Button - Material ScrollTop
File Size: 38.9 KB
Views Total: 7353
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.

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({
3     // OPTIONS HERE
4   });
5 });

6. Options and defaults.

01 $('body').materialScrollTop({
02  
03   // add padding 100px
04   padding: 100,          
05  
06   // reveal button when scrolling over <header> ...
07   revealElement: 'header',
08  
09   // and do it at the end of </header> element
10   revealPosition: 'bottom'
11  
12   // <a href="https://www.jqueryscript.net/animation/">Animation</a> will run 600 ms
13   duration: 600,             
14  
15   // easing animations
16   easing: 'swing',       
17  
18   // execute a function when animation ends   
19   onScrollEnd: function() {
20     console.log('Scroll End');
21   }
22    
23 });

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.

source : jquery.net