在前端实现平滑滚动不使用 jQuery

当我们在网页上进行点击跳转时，经常会看到页面平滑地滚动到目标位置，这种效果可以让用户感受到流畅而自然的体验。通常使用 jQuery 的 animate 方法可以轻松实现这种效果，但是如果我们不想依赖 jQuery 库，该如何实现呢？本文将分享一种使用原生 JavaScript 实现平滑滚动的方法。

实现原理

实现平滑滚动的基本原理是通过定时器（setInterval）不断改变当前页面的滚动位置，使其逐渐接近目标位置。为了达到更加平滑的效果，我们还需要对滚动速度进行控制，即初始速度快，最后逐渐减缓到停止，这样才能够达到流畅的效果。

实现步骤

1. 获取当前滚动位置和目标位置

   我们可以使用 window.scrollY 获取当前页面垂直方向的滚动距离，使用 element.offsetTop 获取元素相对于文档顶部的偏移量，从而获取目标滚动位置。

2. 计算滚动距离和滚动时间

   我们可以根据滚动距离和总时间计算出每次定时器调用需要滚动的距离和时间间隔。滚动距离可以通过目标位置与当前位置之差得出，总时间可以根据我们自定义的滚动速度来计算。

3. 使用定时器实现滚动

   在定时器回调函数中，我们可以获取当前滚动位置，计算出每次需要移动的距离，并使用 window.scrollTo 方法设置新的滚动位置。在一定时间间隔内重复这个过程，直到滚动到目标位置为止。

示例代码

function smoothScroll(target, duration) {
  const targetPosition = target.offsetTop;
  const startPosition = window.scrollY;
  const distance = targetPosition - startPosition;
  const speed = Math.abs(distance) / duration * 2;

  let startTime = null;

  function scrollAnimation(currentTime) {
    if (startTime === null) {
      startTime = currentTime;
    }
    const timeElapsed = currentTime - startTime;
    const scrollDistance = easeInOutQuad(timeElapsed, startPosition, distance, duration);
    window.scrollTo(0, scrollDistance);
    if (timeElapsed < duration) {
      requestAnimationFrame(scrollAnimation);
    }
  }

  function easeInOutQuad(t, b, c, d) {
    t /= d/2;
    if (t < 1) {
      return c/2*t*t + b;
    }
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
  }

  requestAnimationFrame(scrollAnimation);
}

如何使用

假设我们有一个按钮，点击后页面需要平滑滚动到 id 为 "section2" 的元素位置上。我们可以为按钮添加点击事件，调用 smoothScroll 函数即可：

<button onclick="smoothScroll(document.getElementById('section2'), 1000)">跳转到 Section 2</button>

其中，第一个参数为目标元素对象，第二个参数为平滑滚动所需的总时间。

总结

通过本文的介绍和示例代码，我们了解了如何使用原生 JavaScript 实现平滑滚动的效果。该方法不仅可以避免依赖 jQuery 库，还可以让我们更好地理解实现原理，提高前端开发的技能水平。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/14347