javaScript的方法实现浏览器缓慢回到顶部且滚动一定长度再显现出“回到顶部”

最新推荐文章于 2023-12-03 18:25:29 发布

li19980

最新推荐文章于 2023-12-03 18:25:29 发布

阅读量187

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/li19980/article/details/132219271

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            display: none;
            background-color: red;
            color: white;
            width: 60px;
            text-align: center;
            font-size: 25px;
            position:fixed;//固定定位
            left: 1820px;
            top: 860px;
           
        }
        .one:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div>
        <img src="./bj.png" alt=""style="width: 98.5vw;">		//这里是引入一张足够多的图片
        <div class="one">返回顶部</div>							//给一个触发事件
    </div>
    <script>
        let div=document.querySelector(".one"); 				//拿到class="one"的第一个元素
        window.onscroll=function(){								//window的onscroll拿到文档被滚动的长度
            document.documentElement.scrollTop>1000 ?			//利用三元，如果滚动的垂直长度大于1000px，那么盒子将会显示出来，
            div.style.display="block":div.style.display="none"   //这里设置否则条件是因为回到顶部之后，也就是小于1000px之后，盒																									
        }															子会消失
        div.onclick=function(){									//鼠标触发的事件
            auto=setInterval(function(){						//通过计时器，达到缓慢上行，不会直接跳到最顶部
                document.documentElement.scrollTop-=100;		//每次减100，
                    if(document.documentElement.scrollTop==0){
                    clearInterval(auto)							//到达顶部就会停止计时器，否则一直运行，一直下不去
                }
            },30)
            
        }
        
    </script>
</body>
</html>