Question

I just found out that my script is working fine in Chrome, but not in FireFox – and I can’t figure out why.

This is the site in development: http://www.fireflycovers.com

The script should execute when one of the round green buttons is clicked. (scrolls the window to the next container)

The script looks like this at the moment:

$('.scroll').css('display' , 'block');
$('.scroll').on('click', function(e) {
    var container = $(this).parent();

    // Scans if last container in group
    while (document != container[0] && 
           container.find('~.col, ~:has(.col)').length == 0) {

           // If so, search siblings of parent instead
           var container = container.parent(),
               nextdiv = container.nextAll('.col, :has(.col)').first();
    }

    // Back to first .col (when no next .col)
    if (nextdiv.length == 0) {
        nextdiv = $(document).find('.col:first')
    };

    // Animates scrolling to new position
    $('body').animate({scrollTop:nextdiv.offset().top}, 1000);  
        return false;
    });
});

Answer 1

Did you try debugging at all? As in, putting console.log statements throughout your method to see what the values of things are at certain times and watching it execute? Anyway, does using this help at all?

$('body,html').animate({scrollTop:nextdiv.offset().top}, 1000);

Verified from Animate scrollTop not working in firefox

You need html because firefox behaves differently when it comes to overflow.