JQuery scroll（）/ scrollTop（）无法在IE或Firefox中运行

The script below displays a dotted line from the top of the screen to an up arrow which position depends on how far down the page the user has scrolled so that they can then click the arrow to scroll back to the top. This works great in Chrome but doesn't work at all in IE or Firefox, i.e. the dotted line does not grow nor does the arrow move down the page on scroll.

下面的脚本显示从屏幕顶部到向上箭头的虚线,该位置取决于用户滚动页面的距离,以便他们可以单击箭头滚动回到顶部。这在Chrome中运行良好,但在IE或Firefox中根本不起作用,即虚线不会增长,也不会在滚动时向下移动页面。

Does anyone know why this is?

有人知道为什么吗?

HTML:

<div id="dotted-line">
    <div id="up-arrow">^up</div>
</div>

JS:

$(window).scroll(function(){
    if ($(window).scrollTop() > 10) {
        var pos = $('body').scrollTop();
        $('#dotted-line').css('height',pos/4);
        $('#up-arrow').css('top',pos/4);
    } else {
        $('#dotted-line').css('height','6px');
        $('#up-arrow').css('top','-150px');
    }
});

P.S. I've tried doing a JSFiddle but I don't think you can scroll, therefore I cannot demonstrate this.

附:我试过做一个JSFiddle,但我不认为你可以滚动,因此我无法证明这一点。

1 个解决方案

#1

Chrome scrolls with body, IE/Firefox scroll with html. Personally I think html makes more sense, but that's just like my opinion, man.

Chrome用身体滚动,IE / Firefox用html滚动。我个人认为html更有意义,但这就像我的观点,伙计。

Use 'html,body' as a selector when attempting to do stuff with scroll - that includes in your $(...).scrollTop() > 10 check.

尝试使用滚动功能时,使用'html,body'作为选择器 - 包含在$(...)。scrollTop()> 10检查中。

To avoid re-evaluating the selector every time, consider wrapping the code:

为避免每次重新评估选择器,请考虑包装代码:

(function(undefined) {
    var container = $("html,body");
    $.windowScrollTop = function(newval) {
        if( newval === undefined) {
            return container.scrollTop();
        }
        else {
            return container.scrollTop(newval);
        }
    }
})();
// call $.windowScrollTop() to get position
// call $.windowScrollTop(100) to set position to 100

Note that I'm not sure how necessary the "check for undefined and call separately" bit is needed. I'm not sure how jQuery would react to being literally passed undefined as an argument, so I'm playing it safe.

请注意,我不确定需要“检查未定义和单独调用”位。我不确定jQuery如何对字面上传递undefined作为参数作出反应,所以我正在安全地玩它。

#1