Vue.js Developers
Published in

Vue.js Developers

Vue | Vuetify -> How to scroll to an element using JS ScrollToView()


While I was building a UI for the sign ups on, I came across a need to auto scroll the page to a certain element. I tried using Vuetify’s goTo() method, however for some reason I was unable to get it to work.
I was attempting to scroll the page on a <v-dialog fullscreen> component. However, nothing worked until what I wrote below.


This is the solution that I came up with within my Vue component.

methods : {
exampleMethod() {
this.$nextTick(() =>
document.getElementById('example_id_here').scrollIntoView({behavior: 'smooth'})

I tied this method to an event listener to a v-btn:

<v-btn @click=”exampleMethod”></v-btn>

When the button is clicked, and because of $nextTick() waiting until the element is rendered, it scrolls the page down to the desired element.

Hope this helps.

Happy Coding and God Bless the Ukraine!




Helping web professionals up their skill and knowledge of Vue.js

Recommended from Medium

How to build a real-time chatroom with Firebase and React (Hooks)

TC39: Open and Incremental Approach Improves Standards Process

Input Modifiers using ember-modifier

Representation of ideas — Hand holding a light bulb

Better z-index management with Sass

Building React Custom Hooks

Increase OR Decrease the size of static partition in linux

Automated Accessibility Testing for React

Terminal output of the axe-storybook-testing CLI running accessibility tests for a Button component.

ngModel in Angular with Example


Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tony Mucci

Tony Mucci

Founder of My Company Tools • Co-Founder/Former CTO of Dree • Co-Founder of Eklect Enterprises. Opinions on this blog are my own.

More from Medium

Introducing Vue Sortable Table

Axios Requests In VueJs

CORS Preflight Did Not Succeed on nuxt js/ vuejs

Inline SVG icons in VueJS