当前位置：首页 > JavaScript

js实现页面滚动

2026-01-30 21:53:56JavaScript

实现页面滚动的方法

在JavaScript中，可以通过多种方式实现页面滚动效果。以下是几种常见的方法：

使用window.scrollTo()方法

window.scrollTo()方法可以将页面滚动到指定位置。可以接受两个参数，分别是x坐标和y坐标。

window.scrollTo(0, 500); // 滚动到距离顶部500像素的位置

也可以传入一个配置对象，实现平滑滚动效果：

window.scrollTo({
  top: 500,
  behavior: 'smooth'
});

使用window.scrollBy()方法

window.scrollBy()方法相对于当前滚动位置进行滚动，参数同样是x和y坐标。

window.scrollBy(0, 100); // 向下滚动100像素

使用element.scrollIntoView()方法

如果需要将某个元素滚动到视图中，可以使用scrollIntoView()方法。

document.getElementById('target-element').scrollIntoView({
  behavior: 'smooth'
});

监听滚动事件

可以通过监听window的scroll事件来执行滚动相关的操作。

window.addEventListener('scroll', function() {
  console.log(window.scrollY); // 获取当前垂直滚动位置
});

使用CSS实现平滑滚动

在CSS中设置scroll-behavior属性，可以实现全局的平滑滚动效果。

html {
  scroll-behavior: smooth;
}

使用requestAnimationFrame实现自定义滚动动画

如果需要更复杂的滚动动画，可以使用requestAnimationFrame。

js实现页面滚动

function scrollToTop(duration) {
  const start = window.scrollY;
  const startTime = performance.now();

  function scrollStep(timestamp) {
    const elapsed = timestamp - startTime;
    const progress = Math.min(elapsed / duration, 1);
    window.scrollTo(0, start * (1 - progress));

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

  window.requestAnimationFrame(scrollStep);
}

scrollToTop(1000); // 1秒内滚动到顶部