JS的返回top操作

番茄粥

于 2021-04-29 20:31:01 发布

阅读量1.9k

点赞数

分类专栏： JavaScript 文章标签： javascript dom

本文链接：https://blog.youkuaiyun.com/Milky_Yankee/article/details/116276345

版权

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript实现‘返回顶部’的功能，该功能在页面滚动到一定高度时显示，点击后能将页面瞬间滚动到顶部，使top位置为0。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS的返回top操作

在这里插入图片描述
“返回顶部”实现是隐藏的，当滚动到一定高度时显示，点击后回到页面顶部top=0位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
    <style>
    	body{height: 1000px;}
        #Totop{
            height: 20px;
            border: 1px solid red;
            display: none;
            cursor: pointer;
            position: fixed;
            bottom: 100px;
            right: 100px;
        }
    </style>
</head>
<body>
<span id="Totop">&nbsp;^&nbsp;</span>
<script>
 // Totop
 let totop = document.getElementById('Totop');
 totop.onclick = function (){  //返回到页面顶部
     document.documentElement.scrollTop = document.body.scrollTop =0;
 }
 // 当页面滚动时触发
 window.onscroll = function (){
     if(getScrollY()>200){
         totop.style.display='block';
     }else{
         totop.style.display='none';
     }
 } 
 // 得到页面向上滚动的距离
 function getScrollY(){
     return document.body.scrollTop || window.pageYOffset || window.scrollY;
 }
 
</script>
</body>
</html>