记一次“回到顶端”事件的惨痛教训!

返回顶端按钮一直不显示,打开控制台后发现是其直接执行了else中的代码,从而确定是if条件的问题,

$.fn.UiBackTop=function(){
    var ui=$(this);
    var el=$('<a class="ui-backTop" href="#0"></a>');
    ui.append(el);
    $(window).on('scroll',function(){
        var top=$('body').scrollTop();
        if(top>=400){
            el.show();
        }else{
            el.hide();
        }
    });
    el.on('click',function(){
        $(window).scrollTop(0);
    });

}

打开控制台,alert发现document.body.scrollTop一直是0。

查资料发现是DTD的问题。

页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement。

页面没有DTD,即没指定DOCTYPE时,使用document.body。

IE和Firefox都是如此。

jQuery中,$(document).scrollTop()与 $(window).scrollTop()效果完全相同

但是,(window).scrollTop()被所有浏览器支持

所以尽量用(window).scrollTop();

猜你喜欢

转载自blog.csdn.net/qq_42209411/article/details/81670524