回到顶部（原生JS）

方法一：使用锚标记

这是最简单粗暴的一种方法，具体如下：
页面顶部放置代码：

<a id="backtop"></a>

页面底部放置代码：

<a href="#backtop">返回顶部</a>

方法二、使用JS 监控scrollTop

关键点：

1.当滚动条滚动的距离超过设定值时，显现回到顶部按钮。
2.点击按钮后，触发定时器，使scrollTop值缓速减小，从而实现回到顶部。

当然，可以让scrollTop值直接为0，这个看自己的需求。

下面是一个例子：

HTML

<body style="height: 3000px;">//增加body宽度，使其出现滚动条
<div id="backTop" class="backTop"></div>//创建回到顶部的按钮
</body>

CSS

   <style>
.backTop{
    width: 50px;
    height: 50px;
    background-color: hotpink;
    position: fixed;
    bottom: 10%;
    right: 20px;
    display: none;
}
    </style>

 <script>
window.onload=function(){
			    //获取div
    var oBackTop = document.getElementById("backTop")
    			//保存可视窗口的高度
    var iWindowLength = document.documentElement.clientHeight 
				//保存定时器
    var timer = null
    			//元素滚动事件
    document.onscroll = function() {
    			//滚动时，获取滚轮滚动的距离
        var iRollingLength = document.documentElement.scrollTop
        		//判断滚动距离是否大于窗口高度，是则显现div
        if(iRollingLength>iWindowLength){
            oBackTop.style.display="block"
        }else{
            oBackTop.style.display="none"
        }
        		//滚动距离到0时，即已经回到顶部，则关闭定时器
        if(iRollingLength == 0){
            clearInterval(timer)
        } 
    }
    			//没有回到顶部之前，若用户触发了滚轮事件，关闭定时器
    document.onwheel=function(){
        clearInterval(timer)
    }
    			//点击div时，触发定时器，使滚动距离缓速减小
    oBackTop.onclick=function(){
      timer = setInterval(function(){
        document.documentElement.scrollTop = document.documentElement.scrollTop/1.07
     },10)
    }
}
    </script>

至此，回到顶部的效果就算完成了，奇怪的是，除了比锚的方法多了一个缓冲运动，代码却是多了一大堆（怪我写的太麻烦^^）！

不久，在查阅文档后，发现了更简单的方法（有兼容问题）：

方法三、API ：Element.scrollIntoView()

该方法的文档介绍：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

Element.scrollIntoView()
该方法可以让当前的元素滚动到浏览器窗口的可视区域内。

参数
1.alignToTop
一个Boolean值：
如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。
如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。

2.behavior
定义动画过渡效果， "auto"或 “smooth” 之一。默认为 “auto”。

3.block
定义垂直方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “start”。

4、inline
定义水平方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “nearest”。

有了这个方法，优化一下方法二的代码，这次只用改变JS代码就好了，如下：

   <script>
window.onload=function(){
    var oBackTop = document.getElementById("backTop")
    var iWindowLength = document.documentElement.clientHeight 
    document.onscroll = function() {
        var iRollingLength = document.documentElement.scrollTop
        if(iRollingLength>iWindowLength){
            oBackTop.style.display="block"
        }else{
            oBackTop.style.display="none"
        }
    }
   oBackTop.onclick=function(){
   	//关键就在这一段，定义缓冲的过渡效果就好了
    document.body.scrollIntoView({behavior: 'smooth'})
   }
}  
    </script>

与方法二对比，省了不少代码！

———————————————————————————————————————————————————

结语：若文章有错误的地方，烦请在评论区指出。当然，我会不定时的重新编辑写过的文章，查错及优化，希望能将最好的文章展现给读者。

LeslieCheung_

原创文章 8 获赞 69 访问量 2550

关注私信