Simple vue smooth scroll
npm install v-smooth-scroll




Lightweight Vue plugin for smooth-scrolling.
For simple use-cases, the native scroll-behavior CSS property (working draft) may be enough.
Compatible with Vue 3.x and Vue 2.x
- Compatible with Vue 3.x, 2.x
- Directive and programmatic API with global and local config overrides
- SSR
- Smooth, non-blocking animation using requestAnimationFrame (with fallback)
- Y-axis or vertical scrolling
- Specific scroll containers
- 1.4kB gzipped, 2.9kB min
bash
npm install --save v-smooth-scroll
`` js
import VueSmoothScroll from 'v-smooth-scroll'// Vue 2.x
Vue.use(VueSmoothScroll)
// Vue 3.x
const app = Vue.createApp({ / options / })
app.use(VueSmoothScroll)
app.mount('#app')
`
Usage
$3
` html
Section 3
`$3
` js
const myEl = this.$refs.myEl || this.$el || document.getElementById(...)this.$smoothScroll({
scrollTo: myEl,
hash: '#sampleHash' // required if updateHistory is true
})
`$3
#### Vue 2.x
` html
`#### Vue 3.x
` html
`
Custom options
$3
` js
{
duration: 500, // animation duration in ms
offset: 0, // offset in px from scroll element, can be positive or negative
container: '', // selector string or Element for scroll container, default is window
updateHistory: true // whether to push hash to history
easingFunction: null // gives the ability to provide a custom easing function t => ...
// (see https://gist.github.com/gre/1650294 for examples)
// if nothing is given, it will defaults to easeInOutCubic
}
`$3
` js
import VueSmoothScroll from 'v-smooth-scroll'// Vue 2.x
Vue.use(VueSmoothScroll, {
duration: 400,
updateHistory: false,
})
// Vue 3.x
vueApp.use(VueSmoothScroll, {
duration: 400,
updateHistory: false,
})
`$3
` html
`$3
` js
this.$smoothScroll({
scrollTo: this.$refs.myEl,
duration: 1000,
offset: -50,
})
``- [] fix Typescript type lose efficacy problem
- [] example website
- [] unitest
Thanks goes to these wonderful people (emoji key):
James 💻 | a-kriya 💻 🐛 📖 |
This project follows the all-contributors specification. Contributions of any kind welcome!