JavaScript 平滑滚动到锚元素

很多时候我们需要在网页跳转时平滑地滚动到目标元素处，而不是突然跳到目标位置。JavaScript 提供了滚动动画的实现方式，下面我们来介绍一种基于原生 JavaScript 实现的平滑滚动到锚元素的方法。

实现

首先，我们需要先获取需要滚动到的目标元素。这里我们假设目标元素的 id 为 target：

const target = document.querySelector("#target");

接下来，我们需要获取当前滚动距离，以便计算出需要滚动的距离：

const currentScroll = window.pageYOffset;

然后，我们计算目标元素距离页面顶部的距离：

const targetPosition = target.getBoundingClientRect().top + currentScroll;

接下来我们定义动画持续时间和帧数：

const duration = 1000; // 持续时间，单位 ms
const frames = 60; // 动画帧数

然后，我们计算每帧应该滚动的距离：

const distance = targetPosition - currentScroll; // 需要滚动的距离
const perFrame = distance / frames; // 每帧需要滚动的距离

接着我们定义一个函数，用于执行滚动动画：

function scrollToTarget() {
  if (frames <= 0) return; // 帧数为 0，退出递归
  const position = currentScroll + perFrame; // 计算当前位置
  window.scrollTo(0, position); // 滚动到当前位置
  frames--; // 帧数减 1
  requestAnimationFrame(scrollToTarget); // 递归调用
};

最后，我们调用函数开始滚动动画：

scrollToTarget();

完整代码

const target = document.querySelector("#target");
const currentScroll = window.pageYOffset;
const targetPosition = target.getBoundingClientRect().top + currentScroll;
const duration = 1000; // 持续时间，单位 ms
const frames = 60; // 动画帧数
const distance = targetPosition - currentScroll; // 需要滚动的距离
const perFrame = distance / frames; // 每帧需要滚动的距离

function scrollToTarget() {
  if (frames <= 0) return; // 帧数为 0，退出递归
  const position = currentScroll + perFrame; // 计算当前位置
  window.scrollTo(0, position); // 滚动到当前位置
  frames--; // 帧数减 1
  requestAnimationFrame(scrollToTarget); // 递归调用
};

scrollToTarget();

总结

这个方法通过递归调用 requestAnimationFrame 函数，实现了平滑滚动到锚元素的效果。如果需要在滚动过程中停止滚动动画，可以使用 cancelAnimationFrame 函数来停止递归调用。