当前位置：首页 > JavaScript

js实现内容滚动

2026-01-30 14:30:42JavaScript

实现内容滚动的方法

使用 `scrollTo` 方法

通过 window.scrollTo 或 element.scrollTo 实现滚动到指定位置。支持平滑滚动（smooth behavior）或瞬间跳转。

// 滚动到页面顶部
window.scrollTo({ top: 0, behavior: 'smooth' });

// 滚动到某个元素
const element = document.getElementById('target');
element.scrollTo({ top: 100, behavior: 'smooth' });

使用 `scrollBy` 方法

相对当前滚动位置进行偏移滚动，适合实现“滚动一定距离”的效果。

// 向下滚动 200px
window.scrollBy({ top: 200, behavior: 'smooth' });

使用 `scrollIntoView` 方法

将元素滚动到视口内，支持对齐选项和平滑滚动。

const element = document.getElementById('target');
element.scrollIntoView({ behavior: 'smooth', block: 'center' });

监听滚动事件

通过 onscroll 或 addEventListener 监听滚动行为，实现自定义逻辑（如无限加载）。

window.addEventListener('scroll', () => {
  const scrollPosition = window.scrollY;
  if (scrollPosition > 500) {
    console.log('已滚动超过 500px');
  }
});

自定义动画滚动

使用 requestAnimationFrame 实现更复杂的滚动动画。

js实现内容滚动

function smoothScrollTo(targetY, duration = 1000) {
  const startY = window.scrollY;
  const distance = targetY - startY;
  let startTime = null;

  function animation(currentTime) {
    if (!startTime) startTime = currentTime;
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    window.scrollTo(0, startY + distance * progress);
    if (progress < 1) requestAnimationFrame(animation);
  }
  requestAnimationFrame(animation);
}

// 调用示例
smoothScrollTo(500);