Sol Orwell Sol Orwell - 8 months ago 62
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:


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:

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; 


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