How Do I scroll to the #header DIV from an

Question

How Do I scroll to the #header DIV from an <a> link at the bottom of the page and how to change animation speed - JQuery 1.8.3?

Using the best JavaScript code to!

Thanks

Answer 1

You can do so by using offset to scroll to the desired element:

$('html, body').animate({
    scrollTop: $("header").offset().top
}, 500);
return false;

Where 500 is the speed in miliseconds. Be sure to include return false;. This way you avoid the default browser action which will result in a slight flicker.

See http://jsfiddle.net/wf8dh/2/ for an example.

Answer 2

scrolling animation should be done on html tag or body tag. But one thing to keep in mind.. try to store top offset value in a variable first as sometimes animation function may not able to process it immediately and it may append "undefined". so use it like

           $("a").click(function(){
               var top = $("#header").offset().top;
               $("html, body").animate(function(){
                   scrollTop : top+"px"
               }, 2000);
          });

This is how scrolling animation works... :)

Answer 3

Here's an example I think you're looking for