JQuery scrollTop - cross browser compatibility issues

Question

Yesterday I had an issue with a JQuery scrolling script that worked in Chrome but not in IE and Firefox. I asked this query ( JQuery scroll() / scrollTop() not working in IE or Firefox ) yesterday which I marked as being the correct answer only to realise today that it doesn't work in Chrome anymore!

Can anyone help me get this working on all modern browsers?

HTML

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

JQuery

//get window size values (cross browser compatible)
(function(undefined) {
    var container = $("html,body");
    $.windowScrollTop = function(newval) {
        if( newval === undefined) {
            return container.scrollTop();
        }
        else {
            return container.scrollTop(newval);
        }
    }
})();

//draw dotted line on scroll    
$(window).scroll(function(){

    if ($.windowScrollTop() > 10) {
        var pos = $.windowScrollTop();
        $('#dashes').css('height',pos/4);
        $('#footer-dot').css('top',pos/4);
    } else {
        $('#dashes').css('height','6px');
        $('#footer-dot').css('top','-150px');
    }
});

Answer 1

scrollTop() will return value of only first matched element in set $('html,body'), that's why it no more works on chrome

I think your best bet would be to use:

var container = $(document.scrollingElement || "html");

Answer 2

use jQuery migrate plugin: allows you to set different configuration for different browser!

http://code.jquery.com/jquery-migrate-1.1.1.js

hope this will solve your peroblem.