JAVASCRIPT
Programmatic Scroll to Specific Element Using Vue 3 Refs
Learn how to programmatically scroll to any DOM element within your Vue 3 application using template refs and the `scrollIntoView` method for smooth navigation.
// <template>
// <div>
// <h1>Vue 3 Programmatic Scroll</h1>
// <nav>
// <button @click="scrollToSection('section1')">Go to Section 1</button>
// <button @click="scrollToSection('section2')">Go to Section 2</button>
// <button @click="scrollToSection('section3')">Go to Section 3</button>
// </nav>
// <div style="height: 1000px; background-color: #f0f0f0;">
// Scroll down to see sections...
// </div>
// <section ref="section1" style="height: 500px; background-color: #e0e0e0; margin-bottom: 20px; padding: 20px;">
// <h2>Section 1</h2>
// <p>This is the content of section 1.</p>
// </section>
// <div style="height: 800px; background-color: #f8f8f8;">
// More content in between.
// </div>
// <section ref="section2" style="height: 600px; background-color: #d0d0d0; margin-bottom: 20px; padding: 20px;">
// <h2>Section 2</h2>
// <p>This is the content of section 2.</p>
// </section>
// <div style="height: 900px; background-color: #f0f0f0;">
// Even more content.
// </div>
// <section ref="section3" style="height: 700px; background-color: #c0c0c0; padding: 20px;">
// <h2>Section 3</h2>
// <p>This is the content of section 3.</p>
// </section>
// </div>
// </template>
// <script setup>
// import { ref } from 'vue';
// // Create refs for each section
// const section1 = ref(null);
// const section2 = ref(null);
// const section3 = ref(null);
// // A map to easily access refs by string name
// const sections = {
// section1,
// section2,
// section3
// };
// const scrollToSection = (sectionName) => {
// const targetRef = sections[sectionName];
// if (targetRef && targetRef.value) {
// targetRef.value.scrollIntoView({
// behavior: 'smooth', // Smooth scrolling
// block: 'start' // Align the top of the element with the top of the scroll area
// });
// } else {
// console.warn(`Section with ref "${sectionName}" not found.`);
// }
// };
// </script>
How it works: This snippet demonstrates how to achieve programmatic scrolling to specific DOM elements in Vue 3 using template `ref`s. By assigning unique `ref`s to different sections, we can later access their underlying DOM elements. The `scrollToSection` function retrieves the element's reference and then calls `scrollIntoView()` on it. This method provides options for smooth scrolling and specifying alignment, making it perfect for creating in-page navigation or directing user attention to dynamic content. This is a common pattern for single-page applications and dashboards.