Programmatic Scrolling to Elements with Vue 3 Refs

// App.vue
<template>
  <div>
    <h1>Scroll to Element Example</h1>
    <nav class="navigation">
      <button @click="scrollToElement('section1')">Go to Section 1</button>
      <button @click="scrollToElement('section2')">Go to Section 2</button>
      <button @click="scrollToElement('section3')">Go to Section 3</button>
      <button @click="scrollToElement('top')">Back to Top</button>
    </nav>

    <div class="content">
      <section ref="top" class="intro-section">
        <h2>Introduction</h2>
        <p>This is the very top of our content. Click the buttons above to navigate.</p>
        <div class="filler"></div>
      </section>

      <section ref="section1" class="scroll-section">
        <h2>Section 1: The First Scroll Target</h2>
        <p>This is some content for Section 1. We can scroll directly to this point.</p>
        <div class="filler"></div>
      </section>

      <section ref="section2" class="scroll-section">
        <h2>Section 2: Another Destination</h2>
        <p>Here is more information, located further down the page.</p>
        <div class="filler"></div>
      </section>

      <section ref="section3" class="scroll-section">
        <h2>Section 3: The Final Stop</h2>
        <p>This is the last section you can jump to. Enjoy the smooth scroll!</p>
        <div class="filler"></div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// Create a ref for each element you want to scroll to
const top = ref(null);
const section1 = ref(null);
const section2 = ref(null);
const section3 = ref(null);

// Map ref names to their ref objects
const refs = {
  top,
  section1,
  section2,
  section3
};

const scrollToElement = (refName) => {
  const element = refs[refName].value;
  if (element) {
    element.scrollIntoView({
      behavior: 'smooth', // Smooth scrolling animation
      block: 'start'     // Align the top of the element to the top of the viewport
    });
  }
};
</script>

<style>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
}

h1 {
  text-align: center;
  margin: 20px 0;
  color: #2c3e50;
}

.navigation {
  text-align: center;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 15px;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.navigation button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 10px 15px;
  margin: 0 8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.navigation button:hover {
  background-color: #368a68;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.intro-section, .scroll-section {
  background-color: #fff;
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.intro-section h2, .scroll-section h2 {
  color: #34495e;
  margin-bottom: 15px;
}

.filler {
  height: 600px; /* To make content scrollable */
  background-color: #e0f7fa;
  border: 1px dashed #b2ebf2;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #00bcd4;
  font-weight: bold;
}

.filler::before {
  content: 'Scrollable Placeholder Content';
}
</style>