EXAMPLE
First of all, here is my code and problem:
http://www.nathanstpierre.com/MBX/showoff.html
RELEASE
So I see when you click the buttons on the left, the window scrolls to the corresponding title. In every browser except Firefox (including ... IE gasp), this is very smooth. However, if you reduce the height of the window, it becomes smooth on all computers. I have already tried this on several computers and in IE 7-8, Google Chrome, Safari and Firefox 3.5. I deleted every bit of the graphics and colors on the page, so this is not a problem. I got rid of the sidebar that follows you, which is not it.
THEORY
I think the jQuery easing plugin calculates the distance you need to go and then divides the number of pixels that it needs to be moved per unit of time (e.g. 300 pixels in 30 milliseconds, so 10 pixels / ms). It seems like every other browser is capable of making this smooth transition, but maybe the grain provided by the window scroll event is not compressed enough for Firefox to make it smooth? Or maybe I'm using the wrong plugin plugin or the wrong settings.
CODE
$("#sidenav a").click(function () {
$("#sidenav a").animate({'color':'#6d6d6d'},{"duration":400});
$(this).animate({"color":"#fff"},{"duration":400});
clicktarget=$(this).attr("href");
$("html, body").animate({scrollTop: $(clicktarget).offset().top},{"duration":300,"easing":"easeout"});
return false;
});
LOGICS
sidenav onClick. (). Top , href , scrollTop offset(). Top . , , Firefox...
THE PLEA
? ?
!
, , , , , , .
, Firefox a) ) . , , IE ( ) . Mozilla , .
:
. , , . - , ?
, , . , firefox - . FF 4.0 + , . , CSS3: , .