Vue.js Developers
Published in

Vue.js Developers

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

https://www.pexels.com/@kstupak

THE INTRO

While I was building a UI for the sign ups on dree.com, 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.

THE SOLUTION

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

ngModel

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