How scroll to specific element with Vue.js 3

Sometimes, we need to make a scroll go to specific section/element of our page. Achieving this with Vue is very simple; you just need to use a template ref for that. Let's see how to do it.

1 - Create a component template and give it a ref attribute:

<template>
 <main>
   <section ref="sectionRefEl">
     <some-component>element</some-component>
   </section>
 </main>
</template>

2 - Create the script section and declare your ref inside it:

<script setup lang="ts">
import { ref } from 'vue'

// Here is our template ref typed as HTMLElement or null
const sectionRefEl = ref<HTMLElement | null>(null)
</script>

⚠️ ⚠️ ⚠️ Attention!
After Vue 3.5 release you have to use useTemplateRef composable to declare your template ref.

3 - Create a function that make the scroll happen:

<script setup lang="ts">
import { ref } from 'vue'

// Here's our template ref typed as HTMLElement or null
const sectionRefEl = ref<HTMLElement | null>(null)

// Using scrollIntoView() function to achieve the scrolling
function scrollTo(view: Ref<HTMLElement | null>) { 
  view.value?.scrollIntoView({ behavior: 'smooth' }) 
}
</script>

The scrollTo function accepts a ref parameter and enables scrolling by using the DOM API function scrollIntoView().

Read more about the scrollIntoView() function to learn more.

4 - Now you just need to call your function anywhere you want, passing a ref as param and see the scroll happening.

For example, you can create a button firing the method:

<template>
 <main>
   <section ref="sectionRefEl">
     <some-component>element</some-component>
   </section>
   <button @click="scrollTo(sectionRefEl)">Scroll to</button>
 </main>
</template>

And that's it!

Further reading:
Template Refs (Vuejs)
Element.scrollIntoView()

Comments

[Cesar Martinez]

Thanks!
Now you have useTemplateRef composable as of 3.5+ natively

import { useTemplateRef } from 'vue'
const section = useTemplateRef('sectionRefEl')

[cn-2k]

Hello, Cesar!

Glad for the advice, I've updated the article with an note about it. :)