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，而只是向上。

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

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

2 个答案: