圖片：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>回到頂部</title>
<link rel="stylesheet" type="text/css" href="css/try.css" />
<script src="js/app.js"></script>
</head>
<body>
<div class="box">
<img src="img/jkxy.png"/>
</div>
<a style="display:none" href="javascript:;" id="btn" title="回到頂部"></a>
</body>
</html>
css
*{
margin: 0;
padding: 0;
}
.box {
width:1000px;
margin: 0 auto;
}
#btn {
width:40px;
height: 40px;
position:fixed;
left:50%;
bottom:30px;
background:url(../img/頂部.png) no-repeat left top ;
margin-left: 610px;
}
#btn:hover {
background:url(../img/頂部.png) no-repeat left -40px;
}
js
indow.onload = function () {
var topbtn = document.getElementById("btn");
var timer = null;
//獲取屏幕的高度
var pagelookheight = document.documentElement.clientHeight;
window.onscroll = function(){
//滾動超出高度，顯示按鈕，否則隱藏
var backtop = document.body.scrollTop;
// 滾動超過一頻 應該顯示
if(backtop >= pagelookheight){
topbtn.style.display = "block";
}
// 不顯示
else{
topbtn.style.display = "none";
}
}
topbtn.onclick = function () {
timer = setInterval(function () {
var backtop = document.body.scrollTop;
//速度操作 減速
var speedtop = backtop/5;
document.body.scrollTop = backtop -speedtop; //高度不斷減少
if(backtop ==0){ //滑動到頂端
clearInterval(timer); //清除計時器
}
}, 30);
}
}
效果：
