Alpine JS Scroll To

Easily add scroll to functionality with options, powered by Alpine JS 🐭

Install

$3

``html
defer
src="https://unpkg.com/alpinejs-scroll-to@latest/dist/scroll-to.min.js"
>


`

$3

`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



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