锚点在某些页面上不起作用

Question

Here is the site I'm working on: http://defend-foreclosure.com

If you go to http://defend-foreclosure.com/law.html and click through the dropdown links in the nav for "Law", you'll see that the anchors work perfectly. It was hiding the title of each section behind the header, but I fixed the issue by adding the following script to my html files.

<script>
  $().ready(function(){
    // Fixing Anchor links nav leaving the destination text hidden under Header    
    $(window).hashchange(function() {
      var hash = "#" + location.hash.replace(/[^A-Za-z0-9_\-]/g, "");
      if (hash && $(hash).offset()) {
        var pos = $(hash).offset().top - 55;
        $(window).scrollTop(pos);
      }
    });
  });
</script>

The problem occurs when I try to navigate to one of the anchors from any page other than law.html. I think this has something to do with the script only working on .haschange, instead of universally.

If you go to home, about, or contact, and try to click on one of the anchors in the dropdown, you'll notice that it still cuts off the title of the section under the nav. Does anyone know how I can make this work properly on all pages?

EDIT:

If I add the following code outside of .haschange, followed by an alert, it works properly, alerts, and then once I click okay, it messes up and hides the title again.

<script>
    var hash = "#" + location.hash.replace(/[^A-Za-z0-9_\-]/g, "");
          if (hash && $(hash).offset()) {
            var pos = $(hash).offset().top - 55;
            $(window).scrollTop(pos);
          }
</script>

EDIT: I have narrowed the script down to the following 3 lines on my law.html page.

<script>
    var shiftWindow = function() { scrollBy(0, -50) };
    if (location.hash) shiftWindow();
    window.addEventListener("hashchange", shiftWindow);
</script>

This makes the function work properly only when on the law.html page. I still cannot get it to work when clicking an anchor in the nav from another page.

Answer 1

This is not pretty but chrome seems to trigger it's page positioning after the page load event. so the only way i found is with a timeout

<script>
    $(function(){
        setTimeout(function(){
            var shiftWindow = function() { scrollBy(0, -50) };
            if (location.hash) shiftWindow();
            window.addEventListener("hashchange", shiftWindow);
        },10);
    })
</script>

you could also unset the id (the browser would not find where to scroll) and scroll manualy, but you would need to reset the id after, and there is no after if you do not use a timeout

EDIT :

To be able to use this function with other events as well you will need the scroll to be absolute, because in some browser event flow is not exactly the same and may trigger twice :

<script>
    $(function(){
        setTimeout(function(){
            var shiftWindow = function() { 
                var hash = "#" + location.hash.replace(/[^A-Za-z0-9_\-]/g, "");
                if (hash && $(hash).offset()) {
                    var pos = $(hash).offset().top - 55;
                    $(window).scrollTop(pos);
                }
             };
            if (location.hash) shiftWindow();
            window.addEventListener("hashchange", shiftWindow);
        },10);
    })
</script>