Paul. Paul. - 1 month ago 8
CSS Question

ScrollTop js - Firefox doesn't work

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;
}
});
};
}

Answer

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.