README
Material ScrollTop Button
Upgrade instructions 1.x → 2.x
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...
- jQuery + CSS, (TypeScript + SCSS)
Demo (example)
Watch this: https://bartholomej.github.io/material-scrolltop/
Install
Via yarn or npm
yarn add material-scrolltop
Manual install (download)
If you want the latest stable version, get the latest release from the releases page and use dist
folder.
Usage
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="dist/material-scrolltop.css" />
<!-- material-scrolltop plugin -->
<script src="dist/material-scrolltop.js"></script>
Then, before your closing </body>
tag add:
<!-- material-scrolltop button -->
<button class="material-scrolltop" type="button"></button>
<!-- Initialize material-scrolltop (minimal) -->
<script>
$('body').materialScrollTop();
</script>
Settings
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 |
Example (advanced usage)
$('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...');
},
});
Folders
material-scrolltop/ ├── src/ | ├── icons/ │ | └── top-arrow.svg │ ├── material-scrolltop.scss │ └── material-scrolltop.ts ├── dist/ | ├── icons/ │ | └── top-arrow.svg │ ├── material-scrolltop.css │ └── material-scrolltop.js └── demo/ ├── ... └── index.html └── examples/
src/ (for development)
TypeScript + SCSS source files
.ts
, .scss
which are NOT executable in browser
dist/ (for production)
JavaScript + CSS
executable in browser and compiled from
src/
folder with commandyarn build
demo/ (example page)
In this folder you can see an example in real use.
Customization
Colors, sizes and stuff
Using SASS (this file in 'src' folder), you can simply edit default styles, colors, position and customize plugin to fit your needs. :thumbsup: (Or just edit directly css stylesheet)
Hint: Modify scss file, run yarn build
and see the demo.
Icons
SVG
You can change svg
icon in icons/
directory.
Custom text or sign
- Turn off svg icon as sass variable:
$mst-icon: false
- Build your new stylesheet
yarn build
(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>
Dependencies
jQuery 1.7+
Upgrade instructions
Version 1.x → 2.x
Version 2.x.x contains some breaking changes:
- src/ folder now contains source files
.scss
+.ts
which are NOT executable in browser. - dist/ folder contains compiled
.css
,.js
, ... (executable in browser!)
Old versions
Old version is still available:
- Dev branch: 1.x
- npm package:
yarn add material-scrolltop@1-latest
Application
License
Copyright © 2015 - 2020 Lukas Bartak
Proudly powered by nature 🗻, wind 💨, tea 🍵 and beer 🍺 ;)
All contents are licensed under the MIT license.