jQuery each() not working for Firefox, working in webkit

Question

I have a function which detects the section of a single-page site the user is currently on and, depending on the variable passed to it, scrolls to the next section or the previous. This is working fine in Safari and Chrome. However, in Firefox, regardless of where the scroll position is, it treats the browser as if it's at scroll 0.

function scrollToSection(dir) {
    if( !$("body").hasClass("scrolling") ) {
        $("body").addClass("scrolling");

        var headerH = $(".page-header").outerHeight();
        var scrollTop = $("body").scrollTop();

        $("section").each(function() {
            var sectionH = $(this).outerHeight(true);
            var sectionOffset = $(this).offset();
            var sectionOffsetTop = sectionOffset.top - headerH;
            if( (sectionOffsetTop <= scrollTop) && (sectionOffsetTop + sectionH >= scrollTop) ) {
                var prevSection = $(this).prev();
                var nextSection = $(this).next();
                if( dir === "up" ) {
                    $.scrollTo( prevSection, {
                            duration : 1000,
                            offset : {
                                top : -50
                            },
                            onAfter: function() {
                                $("body").removeClass("scrolling");
                            }

                        });
                } else {
                    $.scrollTo( nextSection, {
                            duration : 1000,
                            offset : {
                                top : -50
                            },
                            onAfter: function() {
                                $("body").removeClass("scrolling");
                            }
                        });
                }
                return false;
            }
        });
    }
}

maybe related to http://stackoverflow.com/questions/5469355/why-firefox-doesnt-recognize-section — MatthiasLaug, May 23 '13 at 12:57

score 3 · Accepted Answer · answered May 23 '13 at 13:00

3

FireFox needs the scrolltop set and read from the html element. Other browsers store this on the body element.

do:

var scrollTop = $("html,body").scrollTop();

answered May 23 '13 at 13:00

Tom

582
3
13

Thanks. I didn't realise Firefox cannot take scrollTop from the body. – Fisu May 23 '13 at 13:10

score 1 · Answer 2 · answered May 23 '13 at 12:58

1

Instead of:

$("body").scrollTop();

Try using:

$("body,html").scrollTop();

answered May 23 '13 at 12:58

A. Wolff

74,033
9
94
155

score 0 · Answer 3 · answered May 23 '13 at 13:01

0

Try to change $('body') in $('body,html') . It should work

answered May 23 '13 at 13:01

Darkito

96
7

jQuery each() not working for Firefox, working in webkit

3 Answers3