纯js实现页面返回顶部的动画(超简单)

时间：2023-12-09

以下是纯JS实现页面返回顶部动画的攻略：

1. 准备工作

在 HTML 的 head 标签中引入一个自定义的 JavaScript 文件，比如：

<head>
  <script src="js/scroll-top.js"></script>
</head>

2. 编写 JavaScript 代码

在自定义的 JavaScript 文件中编写如下代码：

// 通过id获取返回顶部按钮
var scrollTop = document.getElementById('scroll-top');

// 点击返回顶部按钮的事件处理函数
scrollTop.onclick = function () {
  // 获取当前滚动条的高度
  var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
  // 设置动画的总时间为500毫秒
  var duration = 500;
  // 每隔10毫秒滚动一次，计算出每次需要滚动的距离
  var step = currentScroll / (duration / 10);
  // 定时器，每隔10毫秒执行一次滚动操作
  var timer = setInterval(function () {
    // 获取当前滚动条的高度
    var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
    // 计算当前需要滚动的距离，向上取整
    var scrollDistance = Math.ceil(scrollHeight - step);
    // 理论上计算出来的值可能会小于0，这时直接设置为0
    if (scrollDistance < 0) {
      scrollDistance = 0;
    }
    // 模拟滚动操作
    document.documentElement.scrollTop = scrollDistance;
    document.body.scrollTop = scrollDistance;
    // 如果已经滚动到了页面顶部，清除定时器
    if (scrollDistance === 0) {
      clearInterval(timer);
    }
  }, 10);
}

3. 方法说明

上面的代码主要实现了两个功能：

点击页面上的一个按钮，触发页面返回顶部的动画效果。
在返回顶部的过程中，页面会平滑地滚动，呈现出可视化动效。

其中，为了实现上述功能，代码中使用了以下核心方法：

getElementById()：用于通过 id 获取某个元素。
setInterval()：用于指定一段时间间隔，重复执行某个函数。
clearInterval()：用于停止由 setInterval() 方法启动的定时任务。
scrollTop：用于获取或者设置元素的滚动条位置。

4. 示例说明

下面是两个示例，演示了如何在页面中嵌入返回顶部按钮，并且添加相应的点击事件处理函数，实现页面平滑滚动的效果。

示例1：基础版

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例1：基础版</title>
  <style>
    /* 样式表省略 */
  </style>
  <script>
    // 代码省略
  </script>
</head>
<body>
  <!-- 页面内容省略 -->
  <div class="scroll-top" id="scroll-top">返回顶部</div>
</body>
</html>

上述代码中，我们在页面的底部添加了一个 class 为 scroll-top，id 为 scroll-top 的 div 元素，作为返回顶部的按钮。

示例2：自定义样式版

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例2：自定义样式版</title>
  <style>
    .scroll-top {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      background: #009688;
      color: #fff;
      font-size: 18px;
      border-radius: 50%;
      cursor: pointer;
    }
    .scroll-top:hover {
      background: #F44336;
    }
  </style>
  <script>
    // 代码省略
  </script>
</head>
<body>
  <!-- 页面内容省略 -->
  <div class="scroll-top" id="scroll-top">^</div>
</body>
</html>

上述代码中，我们自定义了返回顶部按钮的样式，在页面的右下角悬浮显示一个大号的向上箭头，颜色设置为绿色。当鼠标悬浮在按钮上时，背景颜色变成了红色。

上一篇：一个简单的js动画效果代码 下一篇：基于JavaScript实现回到页面顶部动画代码