https://github.com/semlette/anchor-scroller
⚓️ Smoothly scroll to #anchors
https://github.com/semlette/anchor-scroller
anchor scrolling
Last synced: 5 months ago
JSON representation
⚓️ Smoothly scroll to #anchors
- Host: GitHub
- URL: https://github.com/semlette/anchor-scroller
- Owner: semlette
- License: mit
- Created: 2016-12-27T12:54:32.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T19:40:19.000Z (over 3 years ago)
- Last Synced: 2024-09-27T09:23:20.981Z (over 1 year ago)
- Topics: anchor, scrolling
- Language: TypeScript
- Homepage:
- Size: 110 KB
- Stars: 26
- Watchers: 3
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# anchor-scroller
⚓️ Smoothly scroll to #anchors
## Features
* ... Scrolls to anchors
* Stops scrolling if the user scrolls
* Doesn't try to scroll past the end
* It's only 1.5kb in size (900 bytes gzipped 😆)
* Uses `requestAnimationFrame` for smooth animation
## Quickstart
### Node with a module bundler
```shell
npm install anchor-scroller --save
```
```javascript
const AnchorScroller = require("anchor-scroller");
AnchorScroller();
```
### Browser
```html
AnchorScroller()
```
[Check out the wiki for more info.](https://github.com/semlette/anchor-scroller/wiki)
## Configuration
You can pass the instance an options object to tweak it's behavior. The simplest options are `class` and `checkParent`.
```javascript
AnchorScroller({
"class": "scroll", // will make it only react on elements with a "scroll" class.
checkParent: true // will make it check the parent element, if the clicked element didn't match the criteria.
});
```
[The more in-depth usage guide](https://github.com/semlette/anchor-scroller/wiki/Using-Anchor-Scroller) also has documentation on all [options](https://github.com/semlette/anchor-scroller/wiki/Using-Anchor-Scroller#options) and [methods](https://github.com/semlette/anchor-scroller/wiki/Using-Anchor-Scroller#methods).