【前端】页面返回顶部功能

作者：邹峰立，微博：zrunker，邮箱：zrunker@yahoo.com，微信公众号：书客创作，个人平台：www.ibooker.cc。

本文选自书客创作平台第53篇文章。阅读原文 。

书客创作

现今网站基本上使用到返回顶部这一个功能，它们实现的方式也大同小异。实现的方法也非常多，但是每一种实现方式都是不同的，征对性也不同，下面通过三个案例来说说这一功能的实现。

案例1：锚链接，#id

<a href="#id" target="_self">返回顶部</a>

锚链接是实现同一个页面间的定位，如果页面要定位到哪个位置，只需要将#id设置成定位布局的id，那么要返回顶部的功能，只需要把#id改成顶部布局（如div）的id即可，也可以直接设置成#（如果直接设置#会重新加载该页面，所以使用要谨慎）。

锚链接适用于页面布局间导航，不合适实现返回顶部功能。

案例2：窗体直接向上滚动到顶部。

// 实现返回顶部功能标签a
<a class="go-top" href="javascript:;"></a>
// jQuery实现 返回顶部
$('.go-top').bind('click', function() { $(window).scrollTop(0); });

这种方法实现起来也非常简单，使用jQuery给超链接a标签绑定点击事件，通过$(window).scrollTop(0);将整个窗体快速的滚动到距离顶部为0的位置来达到返回顶部效果，这种方法滚动到顶部的速度非常快，几乎是瞬变。

注意：1、href="javascript:;"取消超链接访问，执行javascript方法，这里的方法为空所以不执行，或者使用href="javascript:void(0);"代替。

2、$('.go-top').bind('click', function() { // 实现逻辑});这是jQuery绑定事件的方法，click为点击，function(){}为回调方法。

案例3：也是本次所要实现最终目标。

先看一下本案例实现的效果是什么样：仔细看页面右下角的图标变化，观察效果。

返回顶部效果图

效果1：当页面加载完成之后，返回顶部图标未显示，但是当向下滚动一定的距离之后，返回顶部图标显示出来，要实现这一效果我们要对窗体滚动事件进行监听window.onscroll。
效果2：点击返回顶部图标，页面会以匀减速的方式向上滚动，视觉效果会好很多，要实现匀减速我们要用到setInterval定时器。

实现：在这里采用javascript，实现案例3。

<a id="btn_backup" class="right_fixed_backup" href="javascript:;"></a>

同样是通过a标签实现，至于如何实现固定在页面右侧，这里只需要使用position:fixed固定定位即可。

步骤1、首先要在页面加载完成之后就马上实现窗体滚动事件监听和对标签a点击监听，使用javascript提供的window.onload()方法实现。在该方法中我们不仅仅要实现窗体滚动事件监听和对标签a点击监听，还要实现全局变量的定义，如定时器timer。

window.onload = function() {
    // 获取返回按钮
    var backupBtn = document.getElementById("btn_backup");
    // 获取页面可视区域的高度
    var clientHeight = document.documentElement.clientHeight;
    var timer = null;// 定义定时器变量
    var isTop = true;// 是否返回顶部
    // 滚动滚动条时候触发
    window.onscroll = function() {
        // 实现逻辑
    };
    // 返回顶部按钮点击事件
    backupBtn.onclick = function() {
        // 实现逻辑
    };
};

步骤2、我们要在窗体滚动事件监听里面实现对返回顶部图片的显示和隐藏，这里采用的是如果滚动的高度大于窗口的可视区域的高度时显示，否则隐藏。

// 获取页面可视区域的高度
var clientHeight = document.documentElement.clientHeight;
// 滚动滚动条触发
window.onscroll = function() {
    // 获取滚动条到顶部高度-返回顶部显示或者隐藏
    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (osTop >= clientHeight) {
        backupBtn.style.display = "block";
    } else {
        backupBtn.style.display = "none";
    }
    // 如果是用户触发滚动条就取消定时器
    if (!isTop) {
        clearInterval(timer);
    }
    isTop = false;
};

这里有两个特别小心的地方：

（1）、var osTop = document.documentElement.scrollTop || document.body.scrollTop;获取滚动条到顶部高度，这里是为了兼容不同的浏览器，所以要这样写。

（2）、clearInterval(timer);该方法实现取消定时器，我们要在页面返回到顶部的时候，要及时取消定时器。

步骤3、我们要在返回顶部图标按钮点击的时候触发定时器。

backupBtn.onclick = function() {
    // 设置定时器
    timer = setInterval(
        function() {
            // 获取滚动条到顶部高度
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            var distance = Math.floor(-osTop / 6);
            document.documentElement.scrollTop = document.body.scrollTop = osTop + distance;
            isTop = true;
            if (osTop == 0) {
                clearInterval(timer);
            }
    }, 30);
};

这里通过滚动条到顶部的距离document.documentElement.scrollTop = document.body.scrollTop = osTop + distance;来改变页面对顶部的距离。

注意：var distance = Math.floor(-osTop / 6);这是获取每次要移动的距离，因为是向上移动所以要取负值-，并且要通过Math.floor()该方法是向下取整，如果不调用Math.floor()方法，-osTop / 6将永远都不接近于0，这样会导致滚动条会一直在滚动。当页面滚到到页面顶部的时候要及时关闭定时器。

Github地址
阅读原文

---

微信公众号：书客创作