为什么$（window）.animate scrollTop不起作用？

Question

如果以下代码有效（当然可以）

$( 'html, body' ).animate(
    {
        "scrollTop": "500"
    }, 
    500
);

那为什么下面的代码不起作用？

$( window ).animate(
    {
        "scrollTop": "500"
    }, 
    500
);

如果以下代码有效

$( window ).scroll( myScrollFunctionHandler );

那为什么下面的代码不起作用？

$( 'html, body' ).scroll( myScrollFunctionHandler );

有人可以对为什么必须这样做一个全面的解释吗？

Answer 1

window没有scrollTop属性，这就是第一个示例不起作用的原因。 document.body可以。

关于第二个示例， $(window).scroll是window.onscroll的事件处理程序安装程序。 没有“ body onscroll”事件，因此显然不会调用在body（或html）元素上安装的事件处理程序，因为事件不会使DOM冒泡，而只会使DOM冒泡。

Answer 2

这应该是由于$(window).animate()的内部工作。 实验结果表明，在此jQuery animate（）代码内， $(window).scrollTop()始终返回零，而$(window).scrollTop(value)无法正确设置该值。

但是，它们在animate()之前及其步骤回调函数中起作用。 因此，下面的代码将正常工作。

function scrollNow(final_val){
    var initial_val = $(window).scrollTop(),
        diff = final_val - initial_val
    ;
    $(window).animate(
        {
            scrollTop: diff,
        },
        {
            duration: 1000,
            step: function(now, fx){
               $(window).scrollTop(initial_val + now);
            }
        }
    );
}