jQuery move to anchor location on page load

Question

I have a simple page setup such as:

<div id="aboutUs">   About us content... </div> <div id="header">   Header content... </div> 

When the page loads, I need the page to automatically scroll down (no animation needed) to #header, so the user cannot see the About Us div unless they scroll up.

#aboutUs has a fixed height, so there isn't any need for any variables to determine the height or anything... if that's even needed.

I came across this other question and tried to modify some of the answers for my situation, but nothing seemed to work.

Any help would be appreciated.

Answer 1

Description

You can do this using jQuery's .scrollTop() and .offset() method

Check out my sample and this jsFiddle Demonstration

Sample

$(function() {     $(document).scrollTop( $("#header").offset().top );   }); 

More Information

• jsFiddle Demonstration
• jQuery.scrollTop()
• jQuery.offset()

Answer 2

Did you tried JQuery's scrollTo method? http://demos.flesler.com/jquery/scrollTo/

Or you can extend JQuery and add your custom mentod:

jQuery.fn.extend({  scrollToMe: function () {    var x = jQuery(this).offset().top - 100;    jQuery('html,body').animate({scrollTop: x}, 400); }}); 

Then you can call this method like:

$("#header").scrollToMe();