js返回顶部

最新推荐文章于 2024-11-05 22:07:06 发布

m0_52434369

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量53

点赞数

本文链接：https://blog.csdn.net/m0_52434369/article/details/118422718

版权

用js实现返回返回顶部,可以直接复制看效果哟,块来试试吧！



<!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>
        body{
            height: 1400px;
        }
        #aa{
            display:none;
            width:100px;
            height: 70px;
            background-color: rgb(253, 23, 242);
            position:fixed;
            top:500px;
            left:1160px;
        }
        p{
            line-height: 40px;
          
        }
    </style>
</head>
<body>
 <div>
     <div id="aa">
         <p>点我返回！</p>
     </div>
 </div>
</body>

<script>
    //onscroll方法
    window.onscroll=function(){
    var a=document.documentElement.scrollTop;
    if(a>400)
    {
        document.getElementById("aa").style.display="block";
    }
    else
    {
        document.getElementById("aa").style.display="none";

    }
    }
      

    document.getElementById("aa").addEventListener("click",function(){
        document.documentElement.scrollTop=0;

    })


</script>
</html>