Fixed html header obscures jumped to anchors

[wanagd]

1) Script Title: Scrolling HTML bookmarks

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/bookmarkscroll.htm

3) Describe problem: I' am building a site with a fixed header section. Using within-page links places the jumped-to content right at the very top of the document. This is a problem to me because the fixed header obscures my anchor targets. Is there a way the Scrolling HTML bookmarks script can be modified to account for the height of the header section?

[jscheuer1]

You just need to plan the positioning of your anchors differently to account for the height of the header.

Say you want to scroll to here using the highlighted anchor:


<div><a name="myname" id="myname"></a>Some Content You want to scroll to</div>

And say your fixed header is 200px tall. Then instead of placing the anchor there, place it about 225px earlier, example:


<a name="myname" id="myname"></a>
<div>Some content that fills about 225px worth of vertical space</div>
<div>Some Content You want to scroll to</div>

Or, and I like this method better, put all your anchors in a container div:


<div class="anchors"><a name="myname" id="myname"></a></div>
<div>Some Content You want to scroll to</div>

And in your stylesheet put:


.anchors {
font=size: 1px;
height: 1px;
overflow: hidden;
position: relative;
top: -250px;
}

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[wanagd]

Thanks John. I somehow figured it out in the script. Just had to set the yoffset value to the height of the header and it works out fine.