原生JS实现返回顶部功能

当你点击“返回顶部”按钮，页面会自动滚动到顶部，这种做法被许多网站采用。

之前我用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

秒客网

原生JS实现返回顶部功能

相关文章