<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>页面显示返回头部加动画效果(2016-02-13在过年期间,我终于摸索出来了O(∩_∩)O~)</title>
<style>
body{
height:3000px;
background-color:lightblue;
}
#back_top{
background-color:red;
border:1px solid black;
border-radius:5px;
text-align:center;
line-height:30px;
height:30px;
width:100px;
position:fixed;
right:0px;
bottom:100px;
cursor:pointer;
display:none;
}
</style>
</head>
<body>
<div id="back_top" >Back To Top</div>
<script type="text/javascript">
window.οnscrοll=function(){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
if(scrollTop>200){
document.getElementById("back_top").style.display="block";
}else{document.getElementById("back_top").style.display="none";}
}
document.getElementById("back_top").οnclick=function(){
//window.scrollTo(0,0); //此处没有动画效果
var timer=setInterval( //此处有动画效果
function(){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var step=scrollTop/10;
scrollTop-=step;
scrollTo(0,scrollTop);
if(scrollTop==0){
clearInterval(timer);
timer=null;
}
},
100);
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>页面显示返回头部加动画效果(2016-02-13在过年期间,我终于摸索出来了O(∩_∩)O~)</title>
<style>
body{
height:3000px;
background-color:lightblue;
}
#back_top{
background-color:red;
border:1px solid black;
border-radius:5px;
text-align:center;
line-height:30px;
height:30px;
width:100px;
position:fixed;
right:0px;
bottom:100px;
cursor:pointer;
display:none;
}
</style>
</head>
<body>
<div id="back_top" >Back To Top</div>
<script type="text/javascript">
window.οnscrοll=function(){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
if(scrollTop>200){
document.getElementById("back_top").style.display="block";
}else{document.getElementById("back_top").style.display="none";}
}
document.getElementById("back_top").οnclick=function(){
//window.scrollTo(0,0); //此处没有动画效果
var timer=setInterval( //此处有动画效果
function(){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var step=scrollTop/10;
scrollTop-=step;
scrollTo(0,scrollTop);
if(scrollTop==0){
clearInterval(timer);
timer=null;
}
},
100);
}
</script>
</body>
</html>