返回顶部实现+页面滚动比例顶部展示

最新推荐文章于 2022-05-02 09:35:03 发布

死垃圾

最新推荐文章于 2022-05-02 09:35:03 发布

阅读量380

点赞数

文章标签：滚动比例展示返回顶部

本文链接：https://blog.csdn.net/sszcome/article/details/65628167

版权

比较简单，直接上代码。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>backTop</title>
</head>
<body>
    <style type="text/css">
        #top_div{ 
         position:fixed; 
         bottom:80px; 
         right:0; 
         display:none; 
        }
        #header-process{
            position: fixed;
            top: 0px;
            left: 0px;
            height: 3px;
            background-color: #0A74DA;
        }
    </style> 
    <script type="text/javascript"> 
        window.onscroll = function(){ 
            var clienth = document.documentElement.clientHeight;  //屏幕高度
            var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //滚动条滚动高度
            var allHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight); //整个页面高度
            var top_div = document.getElementById( "top_div" ); 
            if( scrollt >= 300 ) { 
                top_div.style.display = "block"; 
            } else { 
                top_div.style.display = "none"; 
            } 
            // 计算比例
            var heightRatio = scrollt/(allHeight-clienth)*100;
            document.getElementById('header-process').style='width:'+heightRatio+'%';
        } 
    </script> 
    <div id="header-process"></div>
    <a name="top"><a> 
    <div id="top_div"><a href="#top">返回顶部</a>
    </div> 
    <div> 
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>

</body>
</html>

死垃圾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
返回顶部实现+页面滚动比例顶部展示

比较简单，直接上代码。<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>backTop</title></head><body> <style type="text/css"> #top_div{ position:fixed;
复制链接

扫一扫