回到顶部按钮
标签：
JavaScript
滚动条滚动到下一屏出现回到顶部按钮，点击回到顶部按钮滚动条回到顶部。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Javascript 回到顶部效果</title>
<style>
#btn {
width:40px;
height:40px;
position:fixed;
left:50%;
display:none;
margin-left:610px;
bottom:30px;
background:url(http://img1.sycdn.imooc.com//535e0dc100010e9c00400080.jpg) no-repeat left top;
}
#btn:hover {
background:url(http://img1.sycdn.imooc.com//535e0dc100010e9c00400080.jpg) no-repeat 0 -39px;
}
.box {
width:1190px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="box">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//535e0ce800015b7511902787.jpg" />
</div>
<a href="javascript:;" id="btn" title="回到顶部"></a>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script>
window.onload=function(){
var btn=document.getElementById("btn");
var scrollTop=0;
var timer=null;
window.onscroll=function(){
scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//可视区域
var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;
if(scrollTop-clientHeight>0){
document.getElementById('btn').style.display="block";
}else{
btn.style.display="none";
}
}
btn.onclick=function(){
newScrollTop=document.documentElement.scrollTop||document.body.scrollTop;
timer=setInterval(function(){
if(scrollTop==0){
clearInterval(timer);
}
document.documentElement.scrollTop=document.body.scrollTop=0;
},30)
}
}
</script>
</body>
</html>
12/21
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦