完美实现一个“回到顶部”

最新推荐文章于 2023-01-08 20:41:41 发布

原创最新推荐文章于 2023-01-08 20:41:41 发布 · 298 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

19 篇文章

订阅专栏

前言

在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要的效果是要有点缓冲效果。

现代浏览器陆续意识到了这种需求，scrollIntoView意思是滚动到可视，css中提供了scroll-behavior属性，js有Element.scrollIntoView()方法。但是这些对浏览器的兼容性都不是很好。

scroll-behavior

scroll-behavior属性可取值auto|smooth|inherit|unset

scroll-behavior: smooth;是我们想要的缓冲效果。在PC浏览器中，页面默认滚动是在<html>标签上，移动端大多数在<body>标签上，在我们想要实现平滑“回到顶部”，只需在这两个标签上都加上：

 
html, body {

scroll-behavior: smooth;

}

准确的说，写在容器元素上，可以让容器（非鼠标手势触发）的滚动变得平滑，而不局限于<html>，<body>标签。

Element.scrollIntoView()

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

element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数

参数alignToTop

一个Boolean值：

如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。

参数scrollIntoViewOptions

一个带有选项的 object：

{
behavior: "auto" | "instant" | "smooth",

block: "start" | "end",

}

behavior 可选
定义缓动动画， "auto", "instant", 或 "smooth" 之一。默认为 "auto"。
block 可选
"start", "center", "end", 或 "nearest"之一。默认为 "center"。
inline 可选
"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

向下兼容(完美实现)

要达到所有浏览器都有相同（类似）效果，那就要把剩余不支持scroll-behavior属性的浏览器揪出来，用js去完成使命了。

1.判断是否支持scroll-behavior属性

if(typeof window.getComputedStyle(document.body).scrollBehavior === 'undefined') {
  // 兼容js代码
} else {
  // 原生滚动api
  // Element.scrollIntoView()
}

判断是否支持scroll-behavior属性，直接利用原生Element.scrollIntoView()滚动，否则向下兼容处理。

2.缓冲算法

缓冲的直观效果是越来越慢，直到停止，也就是在相同时间内运动的距离越来越短。这样可以设置一个定时器，移动到当前点到目标点距离的缓冲率（比如1/2，1/3，...）处，比如，缓冲率设为2，当前距离目标点64px，下一秒就是32px，然后16px，8px...，到达某个阈值结束，也就是：

var position = position + (destination - position) / n;

封装缓冲函数

 /**
     * 缓冲函数
     * @param {Number} position 当前滚动位置
     * @param {Number} destination 目标位置
     * @param {Number} rate 缓动率
     * @param {Function} callback 缓动结束回调函数 两个参数分别是当前位置和是否结束
     */
    var easeout = function (position, destination, rate, callback) {
        if (position === destination || typeof destination !== 'number') {
            return false;
        }
        destination = destination || 0;
        rate = rate || 2;

        // 不存在原生`requestAnimationFrame`，用`setTimeout`模拟替代
        if (!window.requestAnimationFrame) {
            window.requestAnimationFrame = function (fn) {
                return setTimeout(fn, 18);
            }
        }

        var step = function () {
            position = position + (destination - position) / rate;
            if (Math.abs(destination - position) < 1) {
                callback(destination, true);
                return;
            }
            callback(position, false);
            requestAnimationFrame(step);
        };
        step();
    }

完美实现code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>scrollIntoView</title>
    <style>
        .content {
            height: 3000px;
            border: 1px solid #ccc;
            box-shadow: 0 0 2px solid;
        }

        .back-to-top {
            width: 18px;
            padding: 10px;
            border: 1px solid #ccc;
            box-shadow: 0 0 2px #333;
            position: fixed;
            right: 20px;
            bottom: 40px;
        }

        .back-to-top:hover {
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="content">
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
    <p>很多内容。。。</p>
</div>
<section class="back-to-top">
    回到顶部
</section>
<script>
    /**
     * 缓冲函数
     * @param {Number} position 当前滚动位置
     * @param {Number} destination 目标位置
     * @param {Number} rate 缓动率
     * @param {Function} callback 缓动结束回调函数 两个参数分别是当前位置和是否结束
     */
    var easeout = function (position, destination, rate, callback) {
        if (position === destination || typeof destination !== 'number') {
            return false;
        }
        destination = destination || 0;
        rate = rate || 2;

        // 不存在原生`requestAnimationFrame`，用`setTimeout`模拟替代
        if (!window.requestAnimationFrame) {
            window.requestAnimationFrame = function (fn) {
                return setTimeout(fn, 18);
            }
        }

        var step = function () {
            position = position + (destination - position) / rate;
            if (Math.abs(destination - position) < 1) {
                callback(destination, true);
                return;
            }
            callback(position, false);
            requestAnimationFrame(step);
        };
        step();
    }
    var scrollTopSmooth = function (position) {
        if(typeof window.getComputedStyle(document.body).scrollBehavior === 'undefined') {
            // 兼容js代码
            // 当前滚动高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            easeout(scrollTop, position, 5, function (val) {
                window.scrollTo(0, val);
            });
        } else {
            // 原生滚动api
            document.querySelector('.content').scrollIntoView();
        }
    }

    $backToTop = document.querySelector('.back-to-top')
    $backToTop.addEventListener('click', function () {
        scrollTopSmooth(0);
    }, false);
</script>
</body>
</html>