1. vue3-smooth-scroll

vue3-smooth-scroll

Vue3 Smooth Scroll

Vue 3.x
npm
license

Lightweight Vue plugin for smooth-scrolling extended from vue2-smooth-scroll.

For simple use-cases, the native scroll-behavior CSS property (working draft) may be enough.

Features

  • Works on Vue 3
  • 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, 3.1kB min

Installation

npm:

 npm install --save vue3-smooth-scroll
 import { createApp } from 'vue'
import VueSmoothScroll from 'vue3-smooth-scroll'

const app = createApp(...)
app.use(VueSmoothScroll)

CDN:

 <body>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/vue3-smooth-scroll"></script>
  <script>
    const app = Vue.createApp(...)
    app.use(VueSmoothScroll)
  </script>
</body>

Usage

Directive:

 <a href="#sec-3" v-smooth-scroll>Section 3</a>

<section id="sec-3"></section>

Programmatic:

 methods: {
  scrollToMyEl () {
    const myEl = this.$refs.myEl || this.$el || document.getElementById(...)

    this.$smoothScroll({
      scrollTo: myEl, // scrollTo is also allowed to be number
      hash: '#sampleHash' // required if updateHistory is true
    })
  }
}

Programmatic (in Vue3 setup):

 import { inject, ref } from 'vue'
setup () {
  const myEl = ref(null)
  const smoothScroll = inject('smoothScroll')
  const scrollToMyEl = () => {
    smoothScroll({
      scrollTo: myEl.value,
      hash: '#sampleHash'
    })
  }
}

Custom options

Defaults:

 {
  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`
}

Global:

 const app = createApp(...)
app.use(VueSmoothScroll, {
  duration: 400,
  updateHistory: false
})

Directive:

 <div id="container">
  <a href="#div-id" v-smooth-scroll="{ duration: 1000, offset: -50, container: '#container' }">Anchor</a>

  <div id="div-id"></div>
</div>

Programmatic:

 this.$smoothScroll({
  scrollTo: this.$refs.myEl,
  duration: 1000,
  offset: -50,
})

Programmatic (in Vue3 setup):

 const smoothScroll = Vue.inject('smoothScroll')
smoothScroll({
  scrollTo: refs.myEl,
  duration: 1000,
  offset: -50,
})

License

MIT