javascript - How to implement reliable smooth scroll for hash links -

i'm trying implement smooth scrolling on site when clicking anchor links (links hash, #something).

the problem can't figure out how implement without something not working properly.

current solution

i have several pages representing weeks headers each weekday, (#1, #2, ...) , links them (#1-marker, #1-marker, ...). since don't match, built-in browser scrolling disabled. use following script make them work both on load , on link clicks:

$(function() {     // handle anchor reference links     $('a[href*=#]')         .click(onanchorclick);      // smooth school hash on load if in url     if(location.hash)         $(location.hash+'-marker')             .smoothscroll(); });   function onanchorclick(event) {     // scroll 0 if hash #top     if(this.hash == '#top')     {         scrollto(0);         return false;     }     // try smooth scroll. return true default behavior if hash     // isn't on current page     return $(this.hash+'-marker').smoothscroll() ? false : true; }   $.fn.smoothscroll = function() {     // if have elements work on     if(this.exists())     {         // scroll top of target         scrollto(this.offset().top);         return this;     }     return false; }   $.fn.exists = function() {     // used check if selector got elements     return this.length > 0 ? : false; }   function scrollto(target) {     // animate scrolltop     $('html,body')         .animate({scrolltop: target}, 500); } 

when clicking on link checks if target hash exists on current page. if does, scrolls it, if doesn't link works usual , switches page.

problem

thought worked great, discovered glitch: have global link quick access current week , day. problem since week pages have same links, quick access link matches on other weeks. if on week 40 , current week 50 , click on thursday, goes thursday in week 40 instead of week 50.

i have tried fix using href matching agains document urls disable functionality when link doesn't target current page , similar workarounds, no matter do, seems break.

have of implemented successfully? how do reliably , have links work properly?

---

some example html

the urls year/quarter/week#day.

  <!-- quick access current day in current week -->   <aside id="go-today">     <a href="2014/1/13#1" title="go today">today</a>   </aside>    <!-- regular list on page can week--> <ul class="listing days">     <li><a href="2014/1/13#1">søndag</li>     <li><a href="2014/1/13#2">mandag</li>     <li><a href="2014/1/13#3">tirsdag</li>     <li><a href="2014/1/13#4">onsdag</li>     <li><a href="2014/1/13#5">torsdag</li>     <li><a href="2014/1/13#6">fredag</li>     <li><a href="2014/1/13#7">lørdag</li> </ul>     <!-- toolbar quick access days in week being viewed --> <div id="toolbar">   <a href="2014/1/13#1" title="søndag">sø</a>   <a href="2014/1/13#2" title="mandag">ma</a>   <a href="2014/1/13#3" title="tirsdag">ti</a>   <a href="2014/1/13#4" title="onsdag">on</a>   <a href="2014/1/13#5" title="torsdag">to</a>   <a href="2014/1/13#6" title="fredag">fr</a>   <a href="2014/1/13#7" title="lørdag">lø</a>   <a href="2014/1/13#top" title="topp">     <img src="_/up-arrow.svg" class="icon"/>   </a> </div>    <!-- example of target marker id -->   <article class="day">       <h2>           <span class="marker" id="2-marker"/>           <a href="2014/1/13#2">mandag</a>       </h2>