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>
Update: 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()
Top comments (2)
Thanks!
Now you have useTemplateRef composable as of 3.5+ natively
Hello, Cesar!
Glad for the advice, I've updated the article with an note about it. :)