实现锚点定位功能（React/Vue）

前言

最近接到一个需求，修改某某页面，增加XXX功能，并实现个锚点功能。做产品就是不断优化，增加功能的过程。实现锚点的方式很多， 很多UI库也提供了组件，可以根据自己的需求调整一下组件库也可以实现，也可以用<a href="XX" /> 标签实现，还可以基于scrollIntoView api实现。

使用a标签

<a> 标签的 href 属性值以 # 开头，后面跟着目标元素的 id。点击链接时，浏览器会滚动到具有对应 id 的元素位置。

这种方式的优势在于不需要额外的 JavaScript 代码，但缺点是默认的滚动行为可能会比较突兀。如果需要更平滑的滚动效果，你可以使用 JavaScript 来自定义滚动行为，或者使用 CSS 属性 scroll-behavior: smooth。

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;

使用scrollIntoView

scrollIntoView 是一个用于滚动元素到可见区域的 JavaScript 方法。它是在 Element 接口中定义的。

使用方法

element.scrollIntoView([options]);

• options（可选）是一个包含滚动行为的对象，可以包括以下属性：
  • behavior: 定义滚动的过渡效果。可以是 "auto"、"smooth" 或者不指定。
  • block: 定义垂直方向上的对齐方式，可以是 "start"、"center"、"end" 或者 "nearest"。
  • inline: 定义水平方向上的对齐方式，可以是 "start"、"center"、"end" 或者 "nearest"。

示例

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

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

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

// 将元素滚动到可见区域，垂直方向上对齐到底部
element.scrollIntoView(