javascript 特效实现(2)——回到顶部效果

最新推荐文章于 2024-07-29 13:58:45 发布

dipeiying8720

最新推荐文章于 2024-07-29 13:58:45 发布

阅读量98

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/web-HCJ/p/5513351.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>回到顶部效果（原生js）</title>
    <style type="text/css">
        body{
            margin: 0;

        }
        .bg{
            width: 1022px;
            margin: 0 auto;
        }
        .btn{
            display: none;
            width: 75px;
            height: 75px;
            background:url(../images/网页top小图标（返回顶部）/返回顶部-085.png) no-repeat left top;
            position: fixed;
            left: 50%;
            margin-left: 530px;
            bottom: 10px;
            text-indent: -9999px;
            outline: none;
        }
        .btn:hover{
            background-position: 0 -75px;
        }
    </style>
    
    <script>        
    var timer=null;
    var isScroll=true;
    //1.2构造oScroll函数
    function oScroll(){
        var osTop=document.documentElement.scrollTop||document.body.scrollTop;//1.1滚动高度,兼容
        var oSpeed=Math.ceil(osTop/4);//滚动速度
        document.documentElement.scrollTop=document.body.scrollTop=osTop-oSpeed;
        if(osTop==0){//判断到达顶部,清理定时器
            clearInterval(timer);
        }
        isScroll=true;    
    }
                        
    window.onload=function() {
        var obtn=document.getElementById('btn');//获取按钮元素
        var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;

        // 1.点击返回按钮事件    
        btn.onclick=function(){//为按钮绑定点击事件
            timer=setInterval(oScroll,50);    
        }    
        window.onscroll=function() {
            var osTop=document.documentElement.scrollTop||document.body.scrollTop;//1.1滚动高度,兼容
            if (osTop>clientHeight) {
                btn.style.display="block";
            }else{
                btn.style.display="none";
            }
            if(!isScroll){
                clearInterval(timer);
            }
            isScroll=false;
        }
    }    


    </script>

</head>
<body>
    <div class="bg">
        <img src="../images/jz.jpg">
    </div>
    <a href="javascript:void(0);" title="返回顶部" id="btn" class="btn">返回顶部</a>
</body>
</html>

转载于:https://www.cnblogs.com/web-HCJ/p/5513351.html

dipeiying8720

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 特效实现(2)——回到顶部效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <title>回到顶部效果（...
复制链接

扫一扫