https://github.com/bartholomej/material-scrolltop
Lightweight, Material Design inspired plugin for scrolling on top of the html page (with jQuery or TypeScript)
https://github.com/bartholomej/material-scrolltop
back-to-top back-top css jquery material material-design material-scrolltop sass scrolltop svg-icons typescript
Last synced: 26 days ago
JSON representation
Lightweight, Material Design inspired plugin for scrolling on top of the html page (with jQuery or TypeScript)
- Host: GitHub
- URL: https://github.com/bartholomej/material-scrolltop
- Owner: bartholomej
- License: mit
- Created: 2015-04-19T11:00:01.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T13:52:02.000Z (over 2 years ago)
- Last Synced: 2025-04-09T21:19:10.317Z (26 days ago)
- Topics: back-to-top, back-top, css, jquery, material, material-design, material-scrolltop, sass, scrolltop, svg-icons, typescript
- Language: TypeScript
- Homepage: http://bartholomej.github.io/material-scrolltop/
- Size: 1.02 MB
- Stars: 115
- Watchers: 5
- Forks: 25
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/material-scrolltop)
[](https://github.com/bartholomej/material-scrolltop/)
[](https://www.npmjs.com/material-scrolltop)
[](https://gitter.im/material-scrolltop/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](http://hits.dwyl.com/bartholomej/material-scrolltop)
[](https://github.com/auchenberg/volkswagen)
# Material ScrollTop Button
_[Upgrade instructions 1.x → 2.x](#upgrade-instructions)_
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.](https://bartholomej.github.io/material-scrolltop/)
- Lightweight
- Material Design inspired
- With ripple effect
- Smoothly animated
- [Customizable](#customization)
- With some useful [options](#settings)...
- jQuery + CSS, (TypeScript + SCSS)
## Demo (example)
Watch this: [https://bartholomej.github.io/material-scrolltop/](https://bartholomej.github.io/material-scrolltop/)
## Install
Via **yarn** or **npm**
```bash
yarn add material-scrolltop
```
### Manual install (download)
If you want the latest stable version, get the [latest release](https://github.com/bartholomej/material-scrollTop/releases/latest) 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 `` add:
```html
```
Then, before your closing `` tag add:
```html
$('body').materialScrollTop();
```
## 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)
```javascript
$('body').materialScrollTop({
// Scroll to the top of element ...
padding: 100, // ... and add padding 100px
revealElement: 'header', // Reveal button when scrolling over ...
revealPosition: 'bottom', // ... and do it at the end of 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 command `yarn build`
### demo/ (example page)
In this folder you can see an example in [real use](https://bartholomej.github.io/material-scrolltop/).
## Customization
### Colors, sizes and stuff
Using SASS [_(this file in 'src' folder)_](src/material-scrolltop.scss), 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/`](src/icons/) directory.
#### Custom text or sign
1. Turn off svg icon as sass variable: `$mst-icon: false`
2. Build your new stylesheet `yarn build` (now without svg icon)
3. Put your new sign or text inside html `` element like this:
```html
↑
```
## 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](https://github.com/bartholomej/material-scrolltop/tree/1.x)
- npm package: `yarn add material-scrolltop@1-latest`
## Application
- [Drupal module](https://www.drupal.org/project/material_scrolltop)
## License
Copyright © 2015 - 2020 [Lukas Bartak](http://bartweb.cz)
Proudly powered by nature 🗻, wind 💨, tea 🍵 and beer 🍺 ;)
All contents are licensed under the [MIT license].
[mit license]: LICENSE