js 实现滚动

实现滚动的方法

使用 window.scrollTo()

window.scrollTo() 方法可以滚动到文档中的特定位置。可以指定 x 和 y 坐标，或者使用平滑滚动的选项。

// 滚动到指定位置（x, y）
window.scrollTo(0, 500);

// 使用平滑滚动
window.scrollTo({
  top: 500,
  behavior: 'smooth'
});

使用 window.scrollBy()

window.scrollBy() 方法相对于当前滚动位置滚动指定的距离。

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

// 平滑滚动 200 像素
window.scrollBy({
  top: 200,
  behavior: 'smooth'
});

使用 Element.scrollIntoView()

scrollIntoView() 方法可以让元素滚动到可视区域。支持平滑滚动选项。

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

监听滚动事件

可以通过监听 scroll 事件来执行滚动相关的逻辑。

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

使用 requestAnimationFrame 实现自定义动画

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

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

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

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

  requestAnimationFrame(scrollStep);
}

// 调用自定义滚动函数
smoothScrollTo(1000, 1500);

滚动到页面顶部或底部

可以使用 scrollTo 或 scrollIntoView 快速滚动到页面顶部或底部。

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

// 滚动到底部
window.scrollTo({
  top: document.body.scrollHeight,
  behavior: 'smooth'
});