jQuery move to anchor location on page load
JqueryScrollAnchorJquery Problem Overview
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.
Jquery Solutions
Solution 1 - Jquery
###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
Solution 2 - Jquery
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();
Solution 3 - Jquery
Put this right before the closing Body tag at the bottom of the page.
<script>
if (location.hash) {
location.href = location.hash;
}
</script>
jQuery is actually not required.