js实现仿淘宝返回顶部

最新推荐文章于 2024-08-04 16:33:59 发布

weixin_34226182

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量129

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2879089/blog/730825

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0px;}
        div{width: 100%;height: 300px;border: 1px solid red;}
        a{float: right;color: #666;font-size: 16px;position: fixed;bottom: 5px;right: 5px;padding: 0 20px 0 20px;}
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
    <a href="javascript:void(0);" id="backtop">返回顶部</a>
</body>
<script type="text/javascript">
    var oTop=document.getElementById("backtop");
    var timer = null;
    var clientH = document.documentElement.clientHeight || document.body.clientHeight;
    window.onscroll = function(){
        var scrollT = document.documentElement.scrollTop || document.body.scrollTop;//获得页面滚动的高度（页面卷上去的高度）
        if(scrollT >=clientH/4){ // 页面滚动高度 > 浏览器可视区域高度
           oTop.style.display = "inline-block";// 控制按钮显示or隐藏
        }else{
            oTop.style.display = "none";
        }
    };
    oTop.addEventListener('click', function () {
            timer = setInterval(function () {
                    var scrollt = document.body.scrollTop;
                    var speed = scrollt / 3;
                    document.body.scrollTop = scrollt - speed;
                    if (scrollt == 0) {
                        clearTimeout(timer);
                    }
            }, 30)
        }, false);
</script>
</html>

转载于:https://my.oschina.net/u/2879089/blog/730825