Paul. Paul. - 1 year ago 153
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 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) {
currentHash = hash;
} else {
$scrollWrapper = $('html, body');

scroll = function scroll(value, hash) {

scrollTop: value + 30
}, {
delay: 500,
complete: function () {
currentHash = hash;

Answer Source

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 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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download