JQuery move to anchor when loading page

Question

I have a simple page setup, for example:

<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 (without animation) to #header , so the user cannot see the "About Us" section if they do not scroll up.

#aboutUs has a fixed height, so there is no need for any variables to determine the height or something else ... if necessary.

I met this other question and tried to change some answers to my situation, but nothing worked.

Any help would be appreciated.

Answer 1

Description

You can do this using jQuery .scrollTop() and .offset() methods

See my jsFiddle example and demo

Example

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

Additional Information

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

Answer 2

Have you tried the jQuery scrollTo method? http://demos.flesler.com/jquery/scrollTo/

Or you can extend jQuery and add your own mentode:

 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 as follows:

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

Answer 3

Place this just before the closing Body tag at the bottom of the page.

 <script> if (location.hash) { location.href = location.hash; } </script> 

jQuery is not really required.