https://github.com/markmead/alpinejs-scroll-to
Easily add scroll to functionality with options, powered by Alpine JS 🐭
https://github.com/markmead/alpinejs-scroll-to
alpine-js alpinejs alpinejs-plugin javascript scroll-to scrollto
Last synced: 4 months ago
JSON representation
Easily add scroll to functionality with options, powered by Alpine JS 🐭
- Host: GitHub
- URL: https://github.com/markmead/alpinejs-scroll-to
- Owner: markmead
- License: mit
- Created: 2022-10-26T14:05:59.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-07T08:14:40.000Z (10 months ago)
- Last Synced: 2025-05-27T06:49:52.244Z (8 months ago)
- Topics: alpine-js, alpinejs, alpinejs-plugin, javascript, scroll-to, scrollto
- Language: JavaScript
- Homepage: https://js.hyperui.dev/examples/utility-scroll-to
- Size: 24.4 KB
- Stars: 17
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Alpine JS Scroll To
Easily add scroll to functionality with options, powered by Alpine JS 🐭
## Install
### With a CDN
```html
```
### With a Package Manager
```shell
yarn add -D alpinejs-scroll-to
npm install -D alpinejs-scroll-to
```
```js
import Alpine from 'alpinejs'
import scrollTo from 'alpinejs-scroll-to'
Alpine.plugin(scrollTo)
Alpine.start()
```
## Example
```html
```
### Options
**`targetId`**
This expects the `id` of an element to scroll to without the `#`.
Useful for when you aren't triggering the scroll to from an anchor tag.
**`offsetHeader`**
By default this is `false`.
Setting this to `true` will offset the height of the header element when you
scroll. No more overlap!
You target the header element by applying `x-scroll-to-header` to it.
```html
...
```
**`useSmooth`**
By default this is `true`.
Setting this to `false` will remove the smooth scroll, instead it will be
instant.
## Stats
