案例：带有动画的返回顶部

① 核心原理：使用animate动画返回顶部。

② animate动画函数里面有个scrollTop属性，可以设置位置。

③ 但是是元素做动画，因此使用 $("body, html").animate({scrollTop: 0});

<script>
    // 页面打开时就到一个固定的位置
    $(document).scrollTop(100);
    // 被卷去的头部scrollTop() / 被卷去的左侧scrollLeft()
    var boxTop = $(".container").offset().top;
    $(window).scroll(function() {
        console.log($(document).scrollTop());
        if($(document).scrollTop() >= boxTop) {
            // 显示返回顶部的元素
            $(".back").fadeIn();
        } else {
            // 隐藏返回顶部的元素
            $(".back").fadeOut();
        }
    });
    // 返回顶部的功能
    $(".back").click(function() {
        // 只要是动画就会有排队的情况，必须要清空排队的动画
        $("body, html").stop().animate({
            scrollTop: 0
        });
        // $("document").stop().animate({
        //     scrollTop: 0
        // });  注意：不能是文档做动画，而是html和body元素做动画
    });
</script>