当前位置：首页 > JavaScript

js实现滚动

2026-02-28 20:58:53JavaScript

实现滚动的方法

使用window.scrollTo()方法 window.scrollTo(x-coord, y-coord)可以将页面滚动到指定的坐标位置。例如：

window.scrollTo(0, 500); // 滚动到垂直位置500像素

使用window.scrollBy()方法 window.scrollBy(x-coord, y-coord)可以相对于当前位置滚动指定的距离。例如：

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

使用element.scrollIntoView()方法 element.scrollIntoView()可以将指定的元素滚动到视口中。例如：

js实现滚动

document.getElementById('target').scrollIntoView();

平滑滚动效果 可以通过设置behavior: 'smooth'来实现平滑滚动。例如：

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

监听滚动事件 可以通过window.addEventListener('scroll', callback)来监听滚动事件。例如：

js实现滚动

window.addEventListener('scroll', function() {
  console.log('当前滚动位置:', window.scrollY);
});

自定义滚动动画 可以通过requestAnimationFrame实现自定义滚动动画。例如：

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) {
      requestAnimationFrame(scrollStep);
    }
  }
  requestAnimationFrame(scrollStep);
}

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

使用CSS实现滚动 可以通过CSS的scroll-behavior属性实现平滑滚动：