Question

I have a fixed top bar – so if you click on an internal link (<a href="#xxx">) it gets obscured. Is there any way for me to force (via Jquery/JS) so that any #xxx link gets automatically offset Z pixels?

As requested, example link: http://examine.com/supplements/Creatine/#ref32

Answer 1

It’s better to handle this via html/css changes as opposed to using javascript to correct the issue. Place your content in a scrollable div with a margin at the page top as a placeholder for the fixed content. If you post your html then more specific advice can be given.

Here is an example:

http://jsfiddle.net/mrtsherman/CsJ3Y/3/

body { overflow: hidden; }
#header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background: gray; border: 1px solid black; }
#content { 
    overflow: scroll; 
    position: absolute;
    top: 50px;
    bottom: 0px;
    width: 100%;
    border: 1px solid blue; 
}

html

<div id="header">header</div>
<div id="content">
    <div>
        Page Content <br />
        <a id="a1" href="#anchor2" name="anchor1">Anchor 1</a>                
        <a id="a2" href="#anchor1" name="anchor2">Anchor 2</a>   
    </div>
</div>​