效果圖
效果圖
說明
- 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>結(jié)尾</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;
/* 一開始不需要出現(xiàn) */
/* opacity: 0; */
transition: all 0.3s linear;
/* line-height: 100px; */
}
#backTop:hover{
color: rgb(255,103,0);
}
JS代碼
// 監(jiān)聽滾動事件
var st=0;
// 獲取返回頂部按鈕
var backTop = document.getElementById("backTop");
// 聲明一個定時器
var timer = 0;
window.onscroll=function(){
// 獲取滾動的距離
// document.documentElement 相當(dāng)于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";
}
}
// 實(shí)現(xiàn)點(diǎn)擊返回頂部的功能
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);
}
