js, requestAnimationFrame,实现平滑滚动demo

JavaScript（简称JS）是一种广泛应用于Web开发的脚本语言，它可以为网页添加动态功能和交互性。它是一种解释型语言，可以直接嵌入到HTML中，并由浏览器解释执行。

requestAnimationFrame是JavaScript提供的一个用于优化动画效果的方法。它通过浏览器的刷新频率来调用指定的回调函数，从而实现平滑的动画效果。相比于使用setTimeout或setInterval方法来实现动画，requestAnimationFrame能够更好地利用浏览器的资源，提供更流畅的动画效果。

下面是一个使用requestAnimationFrame实现平滑滚动的示例代码：

function smoothScroll(targetPosition, duration) {
  const startPosition = window.pageYOffset;
  const distance = targetPosition - startPosition;
  let startTime = null;

  function animation(currentTime) {
    if (startTime === null) {
      startTime = currentTime;
    }
    const elapsedTime = currentTime - startTime;
    const scrollY = ease(elapsedTime, startPosition, distance, duration);
    window.scrollTo(0, scrollY);
    if (elapsedTime < duration) {
      requestAnimationFrame(animation);
    }
  }

  function ease(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
  }

  requestAnimationFrame(animation);
}

// 使用示例
const button = document.querySelector('.scroll-button');
button.addEventListener('click', () => {
  smoothScroll(0, 1000); // 滚动到页面顶部，持续时间为1秒
});

上述代码中，smoothScroll函数接受两个参数：目标位置targetPosition和滚动持续时间duration。它通过计算起始位置startPosition、滚动距离distance和动画开始时间startTime来实现平滑滚动效果。在animation函数中，使用ease函数来计算当前滚动位置scrollY，并通过window.scrollTo方法实现滚动效果。如果动画未结束，则通过requestAnimationFrame方法递归调用animation函数，实现连续的帧动画效果。