JS实现一键回顶部

最新推荐文章于 2024-04-28 19:46:17 发布

写Bug的老王

最新推荐文章于 2024-04-28 19:46:17 发布

阅读量616

点赞数 9

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/wsq88888888/article/details/136834609

版权

本文详细介绍了如何在网页中通过HTML锚点、JavaScript的scrollTop、scrollTo和scrollIntoView方法实现‘一键返回顶部’功能，包括使用锚点链接、添加滚动动画效果以及scrollIntoView的灵活应用。

摘要由CSDN通过智能技术生成

以csdn为例都有这种一键回顶部的按钮那么如何实现呢
在这里插入图片描述

方法一，html锚点

锚点指向ID

<body>
    <div id="head">我在顶部</div>
    <br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>
    <div><a href="#head">返回顶部</a></div>
</body>

//注意 锚点 head 跟 id 相同 注意单词准确性

方法二，JS中的scroll

1. scrollTop()
scrollTop属性表示被隐藏在内容区域上方的距离。未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方距离高度.

<body>
    <div>我在顶部</div>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <div><button id="back">返回顶部</button></div>
    <script>
        back.onclick = function(){
           document.body.scrollTop = document.documentElement.scrollTop = 0;
        }
    </script>       
</body>

为回到顶部增加动画效果，滚动条以一定的速度回滚到顶部，使用定时器，将scrollTop的值每次减少50，直到减少到0，则动画完毕

<script>
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
} 
});
}
</script>

2.scrollTo(x,y)
scrollTo(x,y)方法滚动当前window窗口距离，让文档中由坐标x和y指定的点位于显示区域的左上角，设置scrollTo(0,0)可以实现回到顶部的效果

<body>
    <div id="head">我在顶部</div>
    <br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>
    <div><a href="javascript:window.scrollTo(0,0)">返回顶部</a></div>
</body>

将scrollTo(x,y)中的y参数通过scrollTop值获取，每次减少50，直到减少到0，则动画完毕

<script>
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
scrollTo(0,oTop-50);
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
} 
});
}
</script>

3.scrollIntoView()
Element.scrollIntoView方法滚动当前元素，进入浏览器的可见区域　
该方法可以接受一个布尔值作为参数。如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。如果没有提供该参数，默认为true
在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果

<body>
    <div id="head">我在顶部</div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div><button id="back">返回顶部</button></div>
    <script>
        back.onclick = function(){
            head.scrollIntoView();
        }
    </script>
</body>