js标题定位，自动下滑，自动上滑，值得一看

最新推荐文章于 2022-03-05 16:53:27 发布

comeonzeze-邢泽涛

最新推荐文章于 2022-03-05 16:53:27 发布

阅读量2.8k

点赞数

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/weixin_42321963/article/details/81838176

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            border: 0;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        p {
            width: 80%;
            background-color: rgba(54, 40, 45, 0.39);
            margin: 10px auto;
            text-align: center;
            font-size: 30px;
        }

        #h3 {
            width: 100%;
            background-color: rgba(152, 125, 68, 0.53);
            text-align: center;
            margin: 10px auto;
            font-size: 50px;
            z-index: 10000;
        }

        #top {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ffc382;
            margin: 0 auto;
            line-height: 50px;
            text-align: center;
            position: fixed;
            bottom: 1%;
            right: 1%;
        }

        #bottom {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ffc382;
            margin: 0 auto;
            line-height: 50px;
            text-align: center;
            position: fixed;
            top: 1%;
            right: 1%;
        }
    </style>
</head>
<body>

<p>hello001</p>
<p>hello002</p>
<p>hello003</p>
<p>hello004</p>
<p>hello005</p>
<p>hello006</p>
<p>hello007</p>
<p>hello008</p>
<div id="h3">网站导航</div>
<p>hello009</p>
<p>hello010</p>
<p>hello011</p>
<p>hello012</p>
<p>hello013</p>
<p>hello014</p>
<p>hello015</p>
<p>hello016</p>
<p>hello017</p>
<p>hello018</p>
<p>hello019</p>
<p>hello020</p>
<p>hello021</p>
<p>hello022</p>
<p>hello023</p>
<p>hello024</p>
<p>hello025</p>
<p>hello026</p>
<p>hello027</p>
<p>hello028</p>
<p>hello029</p>
<p>hello030</p>
<p>hello031</p>
<p>hello032</p>
<p>hello033</p>
<p>hello034</p>
<p>hello035</p>
<p>hello036</p>
<p>hello037</p>
<p>hello038</p>
<p>hello039</p>
<p>hello040</p>
<p>hello041</p>
<p>hello042</p>
<p>hello043</p>
<p>hello044</p>
<p>hello045</p>
<p>hello046</p>
<p>hello047</p>
<p>hello048</p>
<p>hello049</p>
<p>hello050</p>
<p>hello051</p>
<p>hello052</p>
<p>hello053</p>
<p>hello054</p>
<p>hello055</p>
<p>hello056</p>
<p>hello057</p>
<p>hello058</p>
<p>hello059</p>
<p>hello060</p>

<div id="top">top</div>
<div id="bottom">bot</div>
<script>
    setInterval(function () {
        document.title = Math.round(window.pageYOffset);
    }, 20);
    var topname = document.getElementById("top");
    topname.onclick = function () {

        let toplen = 20;
        let topset = setInterval(function () {
            window.scrollTo(0, window.pageYOffset - toplen);
            if (window.pageYOffset <= 0) {
                clearInterval(topset);
            }
        }, 20);
    }
    var bottomname = document.getElementById("bottom");
    bottomname.onclick = function () {
        let bottomlen = 5;
        let bottomset = setInterval(function () {
            window.scrollTo(0, window.pageYOffset + bottomlen)
            if (window.pageYOffset >= 2239) {
                clearInterval(bottomset);
            }
        })
    }
    var h3name = document.getElementById("h3");
    setInterval(function () {
        if (window.pageYOffset >= (2239 - 1000)) {
            topname.style.visibility = "visible";
        } else {
            topname.style.visibility = "hidden";
        }
        if (window.pageYOffset <= 1000) {
            bottomname.style.visibility = "visible";
        } else {
            bottomname.style.visibility = "hidden";
        }

        if (window.pageYOffset >= 370) {
            h3name.style.position = "fixed";
            h3name.style.top = "2px";

        } else {
            h3name.style.position = "static"
        }


    }, 20);


</script>

</body>
</html>

结果如下：

comeonzeze-邢泽涛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js标题定位，自动下滑，自动上滑，值得一看

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; * { border: 0
复制链接

扫一扫