基于JavaScript实现回到页面顶部动画代码

实现回到页面顶部动画的代码需要使用JavaScript，下面是一份完整攻略：

1. HTML 结构

在页面中添加一个回到顶部的按钮，可以使用一个元素（如 div 或 a 标签）作为按钮，添加样式，如下所示：

<div id="back-to-top">↑ 返回顶部</div>

2. CSS 样式

需要为按钮设置样式，包括按钮的位置、颜色、大小、边框等属性，如下所示：

#back-to-top {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: #333;
  color: #fff;
  font-size: 16px;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
}

3. JavaScript代码

添加 JavaScript 代码，实现点击按钮后页面平滑返回到顶部的效果。这里使用了 requestAnimationFrame，在动画过程中可以更加平滑地滚动页面。

var backToTopEle = document.querySelector('#back-to-top');
var isShow = false;

window.addEventListener('scroll', function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 100) {
    if (!isShow) {
      isShow = true;
      backToTopEle.classList.add('show');
    }
  } else {
    if (isShow) {
      isShow = false;
      backToTopEle.classList.remove('show');
    }
  }
});

function backToTop() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 0) {
    window.requestAnimationFrame(backToTop);
    window.scrollTo(0, scrollTop - scrollTop / 8);
  }
}

backToTopEle.addEventListener('click', backToTop);

4. 示例说明

示例一

假设我们的页面有一个很长的列表，在页面底部添加一个回到顶部的按钮，代码实现如下：

<div id="back-to-top">↑ 返回顶部</div>
<!-- 省略列表代码 -->

#back-to-top {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: #333;
  color: #fff;
  font-size: 16px;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  display: none;
}

#back-to-top.show {
  display: block;
}

var backToTopEle = document.querySelector('#back-to-top');
var isShow = false;

window.addEventListener('scroll', function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 100) {
    if (!isShow) {
      isShow = true;
      backToTopEle.classList.add('show');
    }
  } else {
    if (isShow) {
      isShow = false;
      backToTopEle.classList.remove('show');
    }
  }
});

function backToTop() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 0) {
    window.requestAnimationFrame(backToTop);
    window.scrollTo(0, scrollTop - scrollTop / 8);
  }
}

backToTopEle.addEventListener('click', backToTop);

示例二

如果我们的页面有多个回到顶部的按钮，我们可以使用类名来区分它们，代码实现如下：

<div class="back-to-top">↑ 返回顶部</div>
<!-- 省略其他代码 -->

<div class="back-to-top">↑ 返回顶部</div>
<!-- 省略其他代码 -->

.back-to-top {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: #333;
  color: #fff;
  font-size: 16px;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  display: none;
}

.back-to-top.show {
  display: block;
}

var backToTopEles = document.querySelectorAll('.back-to-top');

function onScroll() {
  backToTopEles.forEach(function (backToTopEle) {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop > 100) {
      if (!backToTopEle.classList.contains('show')) {
        backToTopEle.classList.add('show');
      }
    } else {
      if (backToTopEle.classList.contains('show')) {
        backToTopEle.classList.remove('show');
      }
    }
  });
}

window.addEventListener('scroll', onScroll);

function backToTop() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 0) {
    window.requestAnimationFrame(backToTop);
    window.scrollTo(0, scrollTop - scrollTop / 8);
  }
}

backToTopEles.forEach(function (backToTopEle) {
  backToTopEle.addEventListener('click', backToTop);
});

通过以上步骤，我们就可以实现一个基于 JavaScript 的回到页面顶部动画了。