js代码实现回到顶部和浏览器滚动一定高度的时候出现顶部通栏

最新推荐文章于 2022-06-05 20:12:14 发布

leoNo_1

最新推荐文章于 2022-06-05 20:12:14 发布

阅读量623

点赞数

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

本文链接：https://blog.csdn.net/leoNo_1/article/details/107391766

版权

写写专栏收录该内容

8 篇文章 0 订阅

订阅专栏

js代码实现回到顶部和浏览器滚动一定高度的时候出现顶部通栏

	样式自己喜欢设什么就设什么
		*{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 6000px;
        }
        #btn{
            display: block;
            width: 80px;
            height: 40px;
            text-align: center;
            text-decoration: none;
            color: #000;
            font-weight: bold;
            border: 1px solid #000;
            position: fixed;
            right: 20px;
            bottom: 20px;
        }
        #nav{
            height: 200px;
            width: 100%;
            background: #000;
            display: none;
            position: fixed;
            top:0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="nav"></div>
    <button id="btn">回到顶部</button>
    <script>
    //回到顶部js代码
        var hui = document.getElementById("btn");
        hui.onclick=function(){
            document.body.scrollTop=0;
        }
        //滚动到一定高度会出现顶部通栏
        onscroll=function(){
            var a =document.body.scrollTop;
            var nav = document.getElementById("nav");
            if(a>1000){
                nav.style.display="block";
            }
            if(a<1000){
                nav.style.display="none";
            }
        }
    </script>
</body>

在这里插入图片描述

leoNo_1

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js代码实现回到顶部和浏览器滚动一定高度的时候出现顶部通栏

js代码实现回到顶部和浏览器滚动一定高度的时候出现顶部通栏样式自己喜欢设什么就设什么 *{ margin: 0; padding: 0; } html,body{ height: 6000px; } #btn{ display: block; width: 80px; height: 40px;
复制链接

扫一扫