封装好的javascript回到顶部效果！直接复制可用 1. [代码] [JavaScript]代码 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleTitle/title style p{height:50px;} .return-top{ position:fixed; bottom:30px; right:10px; w
1. [代码][JavaScript]代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{height:50px;}
.return-top{
position:fixed;
bottom:30px;
right:10px;
width:50px;
height:50px;
background-color:yellow;
cursor:pointer;
display:none;
}
.return-top:hover{background-color:green;}
.return-top p{font-size:12px; text-align: center;}
</style>
</head>
<body>
<div class="div">
<p>11111111dsa</p>
<p></p>
<p>2222222222fsdfs</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>3333333fdsf</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>444444444444444444444444</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>555555555555555fdsfs</p>
<p></p>
<p>fdsfs</p>
<p>fsdfs</p>
<p>666666sdfds</p>
<p></p>
<p>fdsf</p>
<p>77777777777sdffs</p>
<p>sfds</p>
<p></p>
<p>888888888dsffs</p>
<p></p>
<p></p>
<p>99999999999999999999fsdfsd</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>fdsfs</p>
<p>10000000000000000000000000000000000000000</p>
</div>
<div id="return-top" class="return-top">
<p>回到<br/>顶部</p>
</div>
<script>
window.onload=function(){
goTop("return-top");
}
function goTop(id){
var _id=document.getElementById(id);
var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;
var times=null;
var isTop=true;
window.onscroll=function(){
var osTop=document.documentElement.scrollTop||document.body.scrollTop;
if(osTop>=clientHeight){
_id.style.display='block';
}else{
_id.style.display='none';
}
if(!isTop){
clearInterval(times);
}
isTop=false;
}
_id.onclick=function(){
times=setInterval(function(){
var osTop=document.documentElement.scrollTop||document.body.scrollTop;
var speed=Math.floor(-osTop/6);
document.documentElement.scrollTop=document.body.scrollTop=osTop+speed;
isTop=true;
if(osTop==0){
clearInterval(times);
}
},30);
}
}
</script>
</body>
</html>