js实现仿淘宝返回顶部

时间 2019-12-25

原文原文链接

<!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>

1. js返回顶部
2. JS实现让页面返回顶部
3. JS实现页面返回顶部
4. jquery 实现返回顶部
5. 仿淘宝顶部等待状态栏
6. gotoTop返回顶部 JS
7. js实现回到顶部
8. 返回顶部
9. 返回顶部实现+页面滚动比例顶部展现
10. 返回顶部实例
更多相关文章...
• PHP imageaffine - 返回经过仿射变换后的图像 - PHP参考手册
• 现实生活中的 XML - XML 教程
• ☆基于Java Instrument的Agent实现
• 算法总结-回溯法