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!
Related Posts
-
Detect mobile in JavaScript – Vue.js example
No Comments | Feb 2, 2019 -
Bootstrap dual listbox solution
No Comments | Nov 29, 2018 -
jQuery – count characters in textarea and text inputs
No Comments | Nov 26, 2015 -
Bootbox.js – easy Bootstrap modal dialogs
No Comments | Nov 14, 2015