当前位置：首页 > JavaScript

js实现上下滚动

2026-04-04 09:06:01JavaScript

实现上下滚动的JavaScript方法

使用window.scrollTo()方法可以实现页面的上下滚动。该方法接受两个参数，分别是水平滚动位置和垂直滚动位置。

// 滚动到页面顶部
window.scrollTo(0, 0);

// 滚动到页面底部
window.scrollTo(0, document.body.scrollHeight);

平滑滚动效果

添加behavior: 'smooth'选项可以实现平滑滚动效果。

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

相对当前位置滚动

使用window.scrollBy()可以实现相对于当前位置的滚动。

js实现上下滚动

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

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

// 平滑滚动选项同样适用
window.scrollBy({
  top: 100,
  behavior: 'smooth'
});

滚动到特定元素

通过element.scrollIntoView()方法可以让特定元素滚动到视口中。

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

动画滚动实现

如果需要更精细的控制，可以使用requestAnimationFrame实现自定义动画。

js实现上下滚动

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

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

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

  window.requestAnimationFrame(step);
}

// 使用示例
smoothScrollTo(500); // 滚动到距离顶部500px的位置

滚动事件监听

可以监听滚动事件来实现滚动相关的交互效果。

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

滚动到顶部按钮实现

常见的"返回顶部"按钮实现方式。

<button id="back-to-top" style="position: fixed; bottom: 20px; right: 20px;">返回顶部</button>

<script>
document.getElementById('back-to-top').addEventListener('click', function() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

// 滚动到一定位置显示按钮
window.addEventListener('scroll', function() {
  const backToTopButton = document.getElementById('back-to-top');
  if (window.pageYOffset > 300) {
    backToTopButton.style.display = 'block';
  } else {
    backToTopButton.style.display = 'none';
  }
});
</script>