React和Vue中实现锚点定位功能

import React from 'react';
 
const ScrollToAnchor = () => {
  const scrollToSection = (sectionId) => {
    const element = document.getElementById(sectionId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };
 
  return (
    <div>
      <nav>
        <ul>
          <li>
            <a onClick={() => scrollToSection('section1')}>Section 1</a>
          </li>
          <li>
            <a onClick={() => scrollToSection('section2')}>Section 2</a>
          </li>
          {/* 其他导航链接... */}
        </ul>
      </nav>
 
      <section id="section1">
        <h2>Section 1</h2>
        {/* 内容... */}
      </section>
 
      <section id="section2">
        <h2>Section 2</h2>
        {/* 内容... */}
      </section>
 
      {/* 其他内容... */}
    </div>
  );
};
 
export default ScrollToAnchor;

<template>
  <div>
    <nav>
      <ul>
        <li>
          <a @click="scrollToSection('section1')">Section 1</a>
        </li>
        <li>
          <a @click="scrollToSection('section2')">Section 2</a>
        </li>
        <!-- 其他导航链接... -->
      </ul>
    </nav>
 
    <section id="section1">
      <h2>Section 1</h2>
      <!-- 内容... -->
    </section>
 
    <section id="section2">
      <h2>Section 2</h2>
      <!-- 内容... -->
    </section>
 
    <!-- 其他内容... -->
  </div>
</template>
 
<script>
export default {
  methods: {
    scrollToSection(sectionId) {
      const element = document.getElementById(sectionId);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    },
  },
};
</script>