0

I have a problem with my scrollTop javascript code only for firefox. I have put some anchors on href links, and only on chrome/explorer does working the smooth scroll. On firefox doesn't. It jumps only on that button but it doesn't scroll to it.

Firefox console error: This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

My code:

if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
    $scrollWrapper = $(document);

    scroll = function scroll(value, hash) {
        $scrollWrapper.scrollTop(value);
        currentHash = hash;
    };
} else {
    $scrollWrapper = $('html, body');

    scroll = function scroll(value, hash) {
        $(document).off('scroll.currentHash');

        $scrollWrapper.animate({
            scrollTop: value + 30
        }, {
            delay: 500,
            complete: function () {
                currentHash = hash;
            }
        });
    };
}
Paul.
  • 205
  • 1
  • 3
  • 8

1 Answers1

0

Firefox places the overflow at the html level, unless specifically styled to behave differently.

To get it to work in Firefox, use

$('body,html').animate( ... );

Working example http://jsfiddle.net/4etct/ The CSS solution would be to set the following styles:

html { overflow: hidden; height: 100%; }
body { overflow: auto; height: 100%; }

I would assume that the JS solution would be least invasive.

Bhupinder kumar
  • 760
  • 5
  • 19