Question

I have a site that features a “fixed” header, the problem is that it really messes up links that link further down the page a la “http://mysite.com/#lower_div_on_the_page”

Is it even possible to use javascript to do something like

if (URL has #hashtag) {starting scroll position = normal position + (my_header_height)}

Is this even possible?

EDIT:
Thanks for all the replies… really appreciated. For reference, I am DEFINITELY using jQuery… how would I do this with jQuery?

Answer 1

Yes, it’s possible.

Here are the steps you need to take:

• Set up a DOM Loaded event handler. There’s more than one way to do this and here’s a link to a web page that explains how to do this. Also if you’re using a javascript framework such as jQuery (see .ready()) or Prototype.js (see observe extension) it would be a lot easier.

• In the DOM loaded event handler function parse the URL (window.location) for the hashtag.

  var hashTag = window.location.href;
hashTag = hashTag.substr(hashTag.indexOf('#') + 1);
// now hashTag contains the portion of the URL after the hash sign

• Then if you recognize the anchor tag compute the desired scroll location based on that element’s location in the DOM tree or whatever logic you would like to use. Again, jQuery (see .offset()) or Prototype.js (see cumulativeScrollOffset) should be able to help with determining the correct offset to scroll to.

• Set the scroll of the page. Again jQuery (see .scrollTop()) or Prototype.js (see scrollTo) both have extensions to help with this.

Here’s a jQuery example:

$(document).ready(function() {
    var hashTag = window.location.href;
    if(hashTag.indexOf('#') > 0)
    {
        hashTag = hashTag.substr(hashTag.indexOf('#'));

        // now get the element's offset relative to the document
        var offsetTop = $(hashTag).offset().top;

        // and finally, scroll the document to that offset
        $(document).scrollTop(offsetTop);
    }
});