javascript - Scroll to anchor position with fixed header -

i have created single page vertical scroll. when user clicks on anchor "about" scroll position. keep in mind is, use fixed header height of 80px.

above example works. when click on "about us" anchor "about" scroll section id of "about". nothing special.

but problem following. when say, want navigate visitors special place in 1 page design. example this: www.mydomain.com/#about - should scroll directly position, when entering above url. can't work. don't know how explain because there lot of scenarios happens me. scroll directly bottom page or scroll not specific section, stops late, or position not minus header results fixed header overlaps content of section. it's important target position minus fixed header.

beside think using unnecessary code parts. advice how improve code nice.

a working code can find here

code: first part of code. here control click function. when user clicks on link inside #primary-navwrapper should function. store asked hash link inside anchorid , set scrolltoanchor function. gets position of hash decreased fixed header (so header not overlap content). , update hash current anchorid.

// offset push content down top     var offset = $('#header').outerheight();       // navigation click action     // scroll # hash id     $('#primary-navwrapper li a[href^="#"]').click(function(event) {          // prevent default action intitiate         event.preventdefault();          // id of section want go         var anchorid = $(this).attr('href');          scrolltoanchor(anchorid);          return false;     });       function scrolltoanchor(anchorid) {      // our scroll target : top position of section has id referenced our href     var target = $(anchorid).offset().top - offset;     //console.log("target" + target);      // magic...smooth scrollin' goodness.     $('html, body').animate({ scrolltop: target }, 500, function () {         //window.location.hash = '!' + id;         window.location.hash = anchorid;     });  } 

does has solution or maybe advice. out answer.

casper

updated answer

this working code jsfiddle

---

problem summary

1. when user clicks 1 of menus, screen move content section, it's close header. there should spaces between content area , header.
2. i need move screen expected content section when user enters homepage query string '#aboutus'

this core question understand far, , summarized future helpers you.

i thoroughly checked codes , found factors don't bring result expected.

first, there no document.ready() scope. declared on global scopes. functions seem okay in global sections, click events should declared in document.ready() section jquery takes them , initilizes them.

for reason, original code doesn't produce animation when scrolling down expected section because it's browser's default behaviour href=#, not click event. added of codes ensure event call.

and secondly, didn't have methods scroll expected content section when url has query string #gallery, #aboutus, , etc. put codes that

please find id on script sheet, locate exact points newly added or editted existing codes. commented lot

---

fyi

there's thing couldn't figure out. code supposed work nicely, ie scrolls differently. since use event.preventdefault() on click event, default scrolling action href=#something shouldn't work. behaviour in ie whereas chrome shows expected result. ( i'm telling here task leave spaces sticky header )

i thought @ first ie bug, wasn't. should work like example made. well, can't dig problem further. it's time.

---

old answer

in case, need query string , let scrolltoanchor takes @ $(document).ready() point.

var querystring = window.location.hash;     scrolltoanchor(querystring); 

i tested on fiddle , works.

and please make sure scrolltoanchor doesn't throw error because of empty parameter. emptry string "" , null object causes error in scrolltoanchor

put safeguard this.

function scrolltoanchor(anchorid) {     if ( anchorid == null || anchorid == "" ) {         return false;     }     .     . 

but safeguard cannot prevent error when user mistyped querystring, #avoutus doesn't exist on document. recommend avoid $(anchorid).offset().top - offset; kind of code.

selecting element directly via such dynamic variables can't gurantee safe object unless totally under control.