js 滚动到指定位置|极客笔记

js 滚动到指定位置

在网页开发中，经常会遇到需要通过 JavaScript 控制页面滚动到指定位置的需求，例如点击某个按钮后页面自动滚动到顶部或某个特定位置。本文将详细介绍如何使用 JavaScript 实现滚动到指定位置的功能。

使用 window.scrollTo() 方法

要实现页面滚动到指定位置，可以使用 window.scrollTo() 方法。该方法接受两个参数，分别为水平方向和垂直方向的坐标。例如，要将页面滚动到水平方向 x 坐标为 0，垂直方向 y 坐标为 500 的位置，可以这样编写代码：

window.scrollTo(0, 500);

在实际项目中，我们可能会希望动画地滚动到指定位置，而不是瞬间跳到。这时可以结合 window.requestAnimationFrame() 方法来实现平滑滚动效果。下面是一个实现滚动到指定位置并带有动画效果的示例代码：

function smoothScrollTo(targetY, duration) {
  const startY = window.pageYOffset;
  const distance = targetY - startY;
  const startTime = performance.now();

  function scroll(time) {
    const elapsed = time - startTime;
    const progress = Math.min(elapsed / duration, 1);
    window.scrollTo(0, startY + distance * progress);

    if (progress < 1) {
      window.requestAnimationFrame(scroll);
    }
  }

  window.requestAnimationFrame(scroll);
}

smoothScrollTo(500, 1000);

上述代码中，smoothScrollTo() 函数接受两个参数，分别为目标垂直方向的坐标和动画持续时间。在函数内部，通过计算滚动距离和时间来实现平滑滚动效果。

使用 Element.scrollIntoView() 方法

除了 window.scrollTo() 方法外，还可以使用元素的 scrollIntoView() 方法来实现滚动到指定位置。该方法会自动滚动到目标元素可见的位置。例如，要滚动到 id 为 “target” 的元素位置，可以这样调用：

document.getElementById("target").scrollIntoView({ behavior: "smooth" });

在上述代码中，scrollIntoView() 方法的参数可以指定滚动行为，例如可以设置 behavior: "smooth" 来实现平滑滚动效果。

实际应用场景

滚动到指定位置的功能在网页开发中非常常见，以下是一些常见的应用场景：

点击按钮滚动到顶部

<button onclick="window.scrollTo(0, 0)">返回顶部</button>

点击按钮后页面会滚动到顶部位置。

导航链接滚动到锚点

<a href="#section1" onclick="document.getElementById('section1').scrollIntoView({ behavior: 'smooth' })">跳转到 section1</a>

点击链接后页面会平滑滚动到指定锚点位置。

滚动到页面底部加载更多内容

window.addEventListener("scroll", function() {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    // 加载更多内容的逻辑
  }
});

当页面滚动到底部时可以触发加载更多内容的操作。

结语

通过 JavaScript 实现滚动到指定位置是网页开发中的常见需求，本文介绍了两种方法实现滚动效果并提供了一些实际应用场景。

js 滚动到指定位置