逐步平滑滚动答案

【问题标题】：Smooth scroll step by step逐步平滑滚动
【发布时间】：2016-01-07 13:18:25
【问题描述】：

我在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;
});

为什么我们选择 html 和 body 而不仅仅是 body？
animate()，对$root 变量的内容进行动画处理，对吧？
为什么将对象传递给animate() 函数？
css 属性 scrollTop 是什么？

【问题讨论】：

Smooth scroll step by step - 让每一步都尽可能小，以便平滑滚动
Why we select html and body not just body? 某些浏览器在html 上实现滚动功能，而不是body。其余的，检查 animate() 文档并搜索 scrollTop（不要与 jQuery scrollTop() 方法混淆）
3：对象包含要设置动画的属性，以及设置动画的值。 4.scrollTop是底层DOMElement的一个属性
2.：animate 逐渐改变元素的属性 - 在这种情况下，只有 scrollTop（从其当前值到 $(href).offset().top in 500 ms )。
你不应该同时问多个问题。除此之外，1. 与：why to use 'html, body' for scrollTop instead of just 'html'、3. 的重复项 jQuery 文档：jQuery.animateproperties, An object of CSS properties and values that the animation will move toward.4.scrollTop是 DOM 元素的属性 MDN: Element.scrollTop

标签： javascript jquery

【解决方案1】：

将 cmets 中的一些答案组合成响应：

Why to use 'html, body' for scrollTop instead of just 'html'
是的！根变量的内容是动画的 - 因此，html 和 body 的 scrollTop 值都发生了变化。
传递给animate() 的三个参数是scrollTop 的一个新值，它是动画到的，一个持续时间和一个完整的函数。 complete 函数用于在窗口向下滚动后更新窗口的位置 - 它在 scrollTop 更改后进行清理，并确保整个窗口都知道“是的，我们已经向下滚动了”。
李>
scrollTop 是一个property of a rendered HTML DOM object，描述某个对象从顶部向下滚动的距离。

【讨论】：