回到顶部的实现_通过锚链接回到顶部,需要将body加入一个名为top的标记怎么加-优快云博客

本文介绍了一种使用HTML和JavaScript创建回顶按钮的方法。当用户滚动页面到一定位置时，该按钮将显示并允许用户一键返回页面顶部。文章详细解释了如何通过监听滚动事件来控制按钮的显示与隐藏，并通过点击事件实现平滑滚动效果。

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

html代码：

js代码：

<a href="javascript:;" style="width: 50px;height: 50px;background: red;position: fixed;bottom: 10px;right: 10px;cursor: pointer;
display: none;" class="btn">回到顶部</a>
<script>
    window.onload = function(){
        var myBtn = document.getElementsByClassName('btn');
        var clientHeight = document.documentElement.clientHeight;
        var timer = null;
        console.log();//找到回到顶部的标签，我的是第一个，所以 myBtn[0]
        window.onscroll = function(){console.log(myBtn[0]);
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            if(osTop > clientHeight){
                myBtn[0].style.display = 'block';
            }else{
                myBtn[0].style.display = 'none';
            }
        };
        myBtn[0].onclick = function(){
            clearInterval(timer);
            timer = setInterval(function(){
                var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                var spd = Math.floor((-osTop) / 0);//设置回到顶部的速度

                document.documentElement.scrollTop = osTop + spd;
                document.body.scrollTop = osTop + spd;

                if(osTop === 0){
                    clearInterval(timer);
                }
            },30);
        };
    }
</script>