原生JS实现返回顶部功能

时间:2021-06-16 10:06:37
当你点击“返回顶部”按钮,页面会自动滚动到顶部,这种做法被许多网站采用 。
 
之前我用jquery实现了返回顶部功能(见jquery实现链接),并在许多项目中使用了这个jquery版本实现。
但最近我将注意力转向了网站性能方面,试图提高页面的加载速度。其中最大的改进便是移除了jquery依赖改用原生js实现“返回顶部”效果。
 
我并不是说绝对不能使用 jquery,而是假使你所处理的一些点击事件用原生js就可解决 ,为什么还要用jquery?因此我回头阅读了之前的jquery返回顶部功能函数,用原生js实现了同样的效果。
 
首先页面上要有用户可点击的元素,像按钮,div,span元素都可以,然后向该元素添加一个点击事件。
 
 
<div class="back-to-top pointer" onclick="scrollToTop();return false;">Back to top  ^</div>

  

点击该元素,“回到顶部”函数就会开始运行。
我们首先希望页面能滚动回顶部,然后是控制滚动,让页面的滚动效果看起来像用户在自然滚动。
第一步,我们要检查目前是否处于页面顶部,如果不是则执行下一步。
 
 
if (document.body.scrollTop!=0||document.documentElement.scrollTop!=0)
{
 
}

  

 
下一步是将页面向上滚动一段距离(这里设为50px)。
 
 
window.scrollBy(0,-50);

  

 
在向上滚动50px后,我们需要定时执行这个滚动操作(设为每10毫秒执行一次)。
现在我们就能看到类似自然滚动的效果,页面滚动到顶部,之后滚动停止。
 
 
<script>
var timeOut;
function scrollToTop(){
    if (document.body.scrollTop!=0||document.documentElement.scrollTop!=0){
        window.scrollBy(0,-50);
        timeOut=setTimeout('scrollToTop()',10);
        }
        else clearTimeout(timeOut);
}
</script>

注:本文为译文。

原文链接:https://dzone.com/articles/back-to-top-pure-javascript

返回顶部之jquery实现链接:https://paulund.co.uk/how-to-create-an-animated-scroll-to-top-with-jquery