使用Vue和React分别实现锚点定位功能

import React from 'react';

function YourComponent() {
  return (
    <div>
      <a href="#anchor1">Go to Anchor 1</a>
      <div id="anchor1">Anchor 1 Content</div>

      <a href="#anchor2">Go to Anchor 2</a>
      <div id="anchor2">Anchor 2 Content</div>
    </div>
  );
}

export default YourComponent;

element.scrollIntoView([options]);

const element = document.getElementById('myElement');

// 将元素滚动到可见区域，默认滚动行为
element.scrollIntoView();

// 平滑滚动到可见区域
element.scrollIntoView({ behavior: 'smooth' });

// 将元素滚动到可见区域，垂直方向上对齐到底部
element.scrollIntoView({ block: 'end' });

// 将元素滚动到可见区域，水平和垂直方向上对齐到中心
element.scrollIntoView({ block: 'center', inline: 'center' });

import React from 'react';

function YourComponent() {
  const scrollToAnchor = () => {
    const anchorElement = document.getElementById('yourAnchorId');

    if (anchorElement) {
      anchorElement.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <div>
      <button onClick={scrollToAnchor}>Scroll to Anchor</button>
      <div id="yourAnchorId">This is the anchor content</div>
    </div>
  );
}

export default YourComponent;

import { useRef, useEffect } from 'react';

function useScrollIntoView() {
  const targetRef = useRef(null);

  function scrollToTarget() {
    if (targetRef.current) {
      targetRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }

  useEffect(() => {
    // 在组件挂载后立即滚动到目标元素
    scrollToTarget();
  }, []);

  return {
    targetRef,
    scrollToTarget,
  };
}

export default useScrollIntoView;

import React from 'react';
import useScrollIntoView from './useScrollIntoView'; // 请替换成实际的路径

function YourComponent() {
  const { targetRef: anchor1, scrollToTarget: scrollToAnchor1 } = useScrollIntoView();
  const { targetRef: anchor2, scrollToTarget: scrollToAnchor2 } = useScrollIntoView();

  return (
    <div>
      <div ref={anchor1}>Anchor 1</div>
      <div ref={anchor2}>Anchor 2</div>
      <button onClick={scrollToAnchor1}>Scroll to Anchor 1</button>
      <button onClick={scrollToAnchor2}>Scroll to Anchor 2</button>
    </div>
  );
}

export default YourComponent;

// directive/ScrollTo.js

export const scrollToDirective = {
  mounted(el, binding) {
    el.addEventListener('click', () => {
      const targetId = binding.value;
      const targetElement = document.getElementById(targetId);

      if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth' });
      }
    });
  }
};

// main.js

import { createApp } from 'vue';
import App from './App.vue';
import { scrollToDirective } from './directive/ScrollTo';

const app = createApp(App);

// 注册全局指令
app.directive('scroll-to', scrollToDirective);

app.mount('#app');

<!-- App.vue -->

<template>
  <div>
    <h1>Scroll to Section</h1>
    <button v-scroll-to="'section1'">Scroll to Section 1</button>
    <button v-scroll-to="'section2'">Scroll to Section 2</button>

    <div id="section1" class="section">
      <h2>Section 1</h2>
      <p>This is the content of Section 1.</p>
    </div>

    <div id="section2" class="section">
      <h2>Section 2</h2>
      <p>This is the content of Section 2.</p>
    </div>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

<style>
.section {
  margin-top: 500px; /* Add some space to make scrolling noticeable */
}
</style>