以下是纯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>
上述代码中，我们自定义了返回顶部按钮的样式，在页面的右下角悬浮显示一个大号的向上箭头，颜色设置为绿色。当鼠标悬浮在按钮上时，背景颜色变成了红色。
The End
大气响应式网络建站服务公司织梦模板
高端大气html5设计公司网站源码
织梦dede网页模板下载素材销售下载站平台（带会员中心带筛选）
财税代理公司注册代理记账网站织梦模板（带手机端）
成人高考自考在职研究生教育机构网站源码(带手机端)
高端HTML5响应式企业集团通用类网站织梦模板(自适应手机端)