DEV Community

cn-2k
cn-2k

Posted on • Edited on

34

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

⚠️ ⚠️ ⚠️ 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

And that's it!

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

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!

Top comments (2)

Collapse
 
blindpupil profile image
Cesar Martinez

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

import { useTemplateRef } from 'vue'
const section = useTemplateRef('sectionRefEl')
Enter fullscreen mode Exit fullscreen mode
Collapse
 
cn-2k profile image
cn-2k

Hello, Cesar!

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay