回到顶部案例(原生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>

JS

 <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代码就好了,如下:

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>

与方法二对比,省了不少代码!

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

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

你可能感兴趣的:(JavaScript)