JS动画滚动到页面顶部 - Javascript

当网页内容较长时，用户需要频繁向下滚动查看全部内容。为了提高用户体验，您可能需要在网页中添加“返回页面顶部”按钮，让用户可以一键回到顶部。

在本文中，将介绍如何使用Javascript编写一个动画，使得网页在滚动到顶部时可以逐渐减速，带有过渡效果。

实现方法

以下是JS动画滚动到页面顶部的实现方法：

function scrollToTop() {
  const startPosition = window.pageYOffset;
  const targetPosition = 0;
  const distance = targetPosition - startPosition;
  const duration = 500;
  let start = null;

  function animation(timestamp) {
    if (!start) start = timestamp;
    const timeElapsed = timestamp - start;
    const progress = Math.min(timeElapsed / duration, 1);
    window.scrollTo(0, startPosition + distance * easeOutQuart(progress));
    if (timeElapsed < duration) requestAnimationFrame(animation);
  }

  function easeOutQuart(x) {
    return 1 - Math.pow(1 - x, 4);
  }

  requestAnimationFrame(animation);
}

在这个代码段中，scrollToTop()函数将使用window.pageYOffset来获取网页当前的滚动位置，并将滚动位置逐渐减速直到最终滚动位置为0。随后，在调用请求时使用window.scrollTo来完成滚动合适位置。animate()函数用于帮助控制每次滚动的时间，以达到过渡效果。

代码片段

function scrollToTop() {
  const startPosition = window.pageYOffset;
  const targetPosition = 0;
  const distance = targetPosition - startPosition;
  const duration = 500;
  let start = null;

  function animation(timestamp) {
    if (!start) start = timestamp;
    const timeElapsed = timestamp - start;
    const progress = Math.min(timeElapsed / duration, 1);
    window.scrollTo(0, startPosition + distance * easeOutQuart(progress));
    if (timeElapsed < duration) requestAnimationFrame(animation);
  }

  function easeOutQuart(x) {
    return 1 - Math.pow(1 - x, 4);
  }

  requestAnimationFrame(animation);
}

结语

在网页滚动到底部之后，通过动态渐变的方式返回页面顶部将会为用户带来更好的体验。我们希望这篇文章对您有所启发，让您的网页更加人性化。