顺利滚动一步一步

Question

我在stackoverflow上发现了很多关于JQuery平滑滚动的问题和答案，但我仍然无法理解它是如何工作的。

var $root = $('html, body');
$('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

1. 为什么我们选择html和body而不仅仅是body？
2. animate()，动画$root变量的内容，对吧？
3. 为什么对象传递给animate()函数？
4. 什么是scrollTop，一个css属性？

Answer 1

将评论中的一些答案汇总到一个回复​​中：

1. Why to use 'html, body' for scrollTop instead of just 'html'
2. 是！根变量的内容是动画的 - 因此，html和body的scrollTop值都会更改。

3. 传递给animate()的三个参数是scrollTop的新值，它是动画的，持续时间和完整的函数。完整的功能用于在窗口向下滚动后更新窗口的位置 - 在scrollTop更改后清理它并确保整个窗口知道“是的，我们已向下滚动”。

4. scrollTop是一个property of a rendered HTML DOM object，用于描述某个对象向下滚动的距离。