Vue.js scroll to element solutions

Find out easy ways to implement Vue.js scroll to element in your app.

Vue.js scroll to element

First of all, let’s mention about “Scroll Behavior” offered by Vue router. When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does. Vue-router allows you to achieve these and even better, allows you to completely customize the scroll behavior on route navigation.

Note: this feature only works if the browser supports history.pushState. Example:

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return desired position
  }
})

This thing is very useful in SPAs (Single Page Apps), to navigate between for example a long list of items and show item details. We can save current position (offsetY) in vuex storage, and after back from item details view, we can smoothly back to latest position on the list.

More about scroll behavior:

https://router.vuejs.org/guide/advanced/scroll-behavior.html

Vue solutions for scroll to elements

The first one is a directive that listens for click events and scrolls to elements, vue-scrollto. Scrolling to elements was never this easy!

It allows to scroll to any element on page, scroll inside any container, customize how scrolling behaves. The solution is for Vue.js 2.0+.

Setup

npm install --save vue-scrollto

or

yarn add vue-scrollto

Samples

var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');

Vue.use(VueScrollTo)

// You can also pass in the default options.
Vue.use(VueScrollTo, {
     container: "body",
     duration: 500,
     easing: "ease",
     offset: 0,
     force: true,
     cancelable: true,
     onStart: false,
     onDone: false,
     onCancel: false,
     x: false,
     y: true
 })

// In case you are using the browser version 
// (directly including the script on your page)
// you can set the defaults with.

VueScrollTo.setDefaults({
    container: "body",
    duration: 500,
    easing: "ease",
    offset: 0,
    force: true,
    cancelable: true,
    onStart: false,
    onDone: false,
    onCancel: false,
    x: false,
    y: true
})

HTML

<a href="#" v-scroll-to="'#element'">Scroll to #element</a>

<div id="element">
    Hi. I'm #element.
</div>

Another way: programatically

var VueScrollTo = require('vue-scrollto');

var options = {
    container: '#container',
    easing: 'ease-in',
    offset: -60,
    force: true,
    cancelable: true,
    onStart: function(element) {
      // scrolling started
    },
    onDone: function(element) {
      // scrolling is done
    },
    onCancel: function() {
      // scrolling has been interrupted
    },
    x: false,
    y: true
}

var cancelScroll = VueScrollTo.scrollTo(element, duration, options)

// or alternatively inside your components you can use
cancelScroll = this.$scrollTo(element, duration, options)

// to cancel scrolling you can call the returned function
cancelScroll()

Multiple options available to adjust, take a look here.

License: MIT

GitHub

https://github.com/rigor789/vue-scrollto

Docs

https://rigor789.github.io/vue-scrollto/#/examples

See also

Another solution of Vue.js scroll to element – Vue.js 2 smooth scroll

jQuery scroll to anchor – jquery.anchorScroll plugin

Detect mobile in JavaScript – Vue.js example

Enjoy!