实现锚点跳转效果

锚点跳转是网页中常见的导航效果，可以让用户平滑地滚动到页面的特定位置。

实现代码

const scrollToAnchor = (anchor) => {
  const element = document.querySelector(`#${anchor}`);
  if (element) {
    const topOffset = 100; // 顶栏高度
    const topPosition =
      element.getBoundingClientRect().top +
      window.pageYOffset -
      topOffset;
    window.scrollTo({ top: topPosition, behavior: "smooth" });
  }
};

代码解析

这段代码实现了一个平滑滚动到指定锚点的功能，主要包含以下几个部分：

1. 函数定义：创建了一个名为 scrollToAnchor 的函数，接收一个 anchor 参数，表示要跳转到的锚点ID。

2. 元素查询：使用 document.querySelector 方法查找ID与传入的 anchor 参数匹配的DOM元素。

3. 元素存在检查：使用条件语句判断找到的元素是否存在，避免对不存在的元素进行操作。

4. 计算滚动位置：

   • topOffset 变量定义了一个偏移量（100像素），通常用于避开固定的顶部导航栏。
   • topPosition 变量通过组合元素相对于视口的位置（element.getBoundingClientRect().top）和页面当前的滚动位置（window.pageYOffset），再减去顶部偏移量，计算出最终需要滚动到的位置。

5. 执行滚动：使用 window.scrollTo 方法并配置 behavior: "smooth" 选项，实现平滑滚动到计算出的位置。

使用方法

1. 复制代码：将上述JavaScript代码复制到你的项目中。

2. 调用函数：当需要跳转到特定锚点时，调用 scrollToAnchor 函数并传入锚点ID。例如：

   // 跳转到ID为"section-1"的元素位置
   scrollToAnchor("section-1");

3. 调整偏移量：根据你的页面布局，可能需要修改 topOffset 变量的值，确保滚动位置正确避开固定的顶部元素。

4. 添加事件监听器：通常可以为导航链接添加点击事件监听器，在点击时执行锚点跳转。例如：

   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
     anchor.addEventListener('click', function(e) {
       e.preventDefault();
       const targetId = this.getAttribute('href').substring(1);
       scrollToAnchor(targetId);
     });
   });