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實現
• 算法總結-回溯法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。