Sol Orwell Sol Orwell - 5 months ago 22
jQuery Question

Modifying offset of # link?

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

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>‚Äč
Comments