网站的返回顶部

html部分

<div class="aside_top">
<div class="aside_one" id="top">
<a href="javascript:void(0);">
<img src="img/icon.png"/>
<b class="aside_title" style="display:none ;">返回顶部</b>
</a>
</div>
</div>

css部分

.aside_top{
position: fixed;
top:80%;
right:0 ;
}
.aside_one{
display:none ;
}
.aside_one a{
background: #ccc;
display: inline-block;
width:40px ;
height:35px;
line-height:35px ;
text-align: center;
padding-top: 5px;
}
.aside_one a:hover{
background: #f00;
}
.aside_one a:hover img{
display: none;
}
.aside_one a:hover b{
display: block !important;
}
.aside_title{
color: #fff;
font-size: 12px;
display: block;
padding-left: 6px;
line-height: 18px;
width: 30px;
margin-top: -2px;
}

js部分

var top=document.getElementById('top');
var clientH=document.documentElement.clientHeight||document.body.clientHeight||document.innerHeight;
var timer=null;
var isTop=true;
window.onscroll=function(){
var osTop=document.documentElement.scrollTop||document.body.scrollTop;
if(osTop>=clientH){
top.style.display='block';
}else{
top.style.display='none';
}
if(!isTop){
clearInterval(timer);
}
isTop=false;
};
top.onclick=function(){
timer=setInterval(function(){
var osTop=document.documentElement.scrollTop||document.body.scrollTop;
var isspeed=Math.floor(-osTop/3);
document.documentElement.scrollTop=document.body.scrollTop=osTop+isspeed;
isTop=true;
if(osTop == 0){
clearInterval(timer);
}

},50);

}

}