js实现回到顶部

最新推荐文章于 2021-01-12 10:59:26 发布

a419029964425306

最新推荐文章于 2021-01-12 10:59:26 发布

阅读量81

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/LeeYom1993/p/4366955.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js实现回到顶部</title>
</head>
<style type="text/css">
    .box{ width:1190px; margin:0 auto;}
    #btn{ width:40px; height:40px; margin-left:610px; bottom:30px; left:50% ;position:fixed; background:url(top_bg.png) no-repeat left top; display:none;}
    #btn:hover{ background:url(top_bg.png); background-position:0 -40px;}
</style>
<script type="text/javascript">
    window.onload=function(){//页面加载完成后执行
        var obtn=document.getElementById("btn");
        var timer=null;
        var my_scroll=true;
        var clientHeight=document.documentElement.clientHeight;//获取可视区高度

        window.onscroll=function(){
        var osTop=document.documentElement.scrollTop || document.body.scrollTop;
            if(osTop>=clientHeight){//判断滚动条距离页面顶端的距离是否大于可视区的高度，若大于则隐藏，小于则显示
                obtn.style.display="block";
            }else{
                obtn.style.display="none";
            }
            if(!my_scroll){
                clearInterval(timer);
            }
                my_scroll=false;
        }
        
        
        
        
        obtn.onclick=function(){
                var timer=setInterval(function(){//定时器
                var osTop=document.documentElement.scrollTop || document.body.scrollTop;//滚动条距离页面顶端的距离,分不同的浏览器，考虑浏览器兼容性问题
                var ispeed=Math.floor(-osTop/6);//向下取整
                document.documentElement.scrollTop=document.body.scrollTop=osTop+ispeed;//滚轮回到顶部由快到慢
                my_scroll=true;
                if(osTop==0){
                    clearInterval(timer);
                }
            },30);
        }
        
        
    }
</script>

<body>
<div class="box"><img src="tb_bg.jpg" /></div>
<a href="javascript:;" id="btn" title="回到顶部"></a><!--javascript:;阻止标签的默认行为-->
</body>
</html>

主要知识点：

1.window.onload：页面加载完成触发事件

2.document.documentElement.clientHeight：获取可视区高度

3.window.onscroll：滚动条触发事件

4.document.documentElement.scrollTop || document.body.scrollTop：滚动条距离页面顶端的距离

5.setInterval：定时器

转载于:https://www.cnblogs.com/LeeYom1993/p/4366955.html

a419029964425306

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现回到顶部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>...
复制链接

扫一扫