效果图
效果图
说明
- html/css/js代码分别保存在index.html/main.css/main.js 文件中，三个文件保存在同一文件夹下即可
源代码
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>返回顶部</title>
<!--引入css文件-->
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- 返回顶部按钮 -->
<div id="backTop">
<span>回到<br>顶部</span>
</div>
<div id="main_page">
<h1>开头</h1>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h2>结尾</h2>
</div>
<!--引入js文件-->
<script src="main.js"></script>
</body>
</html>
CSS 代码
body{
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
#main_page{
width: 60%;
margin: 10px auto;
background-color: #fff;
border: 1px dashed #ccc;
text-align: center;
}
#backTop{
width: 100px;
height: 100px;
background-color: #fff;
border: 1px solid rgb(226, 225, 225);
position: fixed;
right: 10%;
bottom: 10%;
font-size: 30px;
color: #757575;
cursor: pointer;
text-align: center;
/* 一开始不需要出现 */
/* opacity: 0; */
transition: all 0.3s linear;
/* line-height: 100px; */
}
#backTop:hover{
color: rgb(255,103,0);
}
JS代码
// 监听滚动事件
var st=0;
// 获取返回顶部按钮
var backTop = document.getElementById("backTop");
// 声明一个定时器
var timer = 0;
window.onscroll=function(){
// 获取滚动的距离
// document.documentElement 相当于HTML元素
// document.body.scrollTop 是为了兼容IE浏览器
st = document.documentElement.scrollTop || document.body.scrollTop;
// 控制 backTop 的显示隐藏
if(st>500){
backTop.style.opacity = "1";
}else{
backTop.style.opacity = "0";
}
}
// 实现点击返回顶部的功能
backTop.onclick = function(){
// 清除上一次的定时器
clearInterval(timer);
timer=setInterval(function(){
// console.log(st);
// 每次滚动的距离是不同的，会越来越慢
var speed = st/10;
// 对“速度”向上取整，而不是四舍五入，否则可能最后减不到0
speed = Math.ceil(speed);
// 到头以后，也要清除定时器，否则无法正常向下滚动
if(st<=0){
clearInterval(timer);
}
document.documentElement.scrollTop = st-speed;
},30);
}
