修改#link的偏移量?

时间:2012-03-15 16:56:59

标签: jquery jquery-ui

我有一个固定的顶栏 - 所以如果你点击内部链接(<a href="#xxx">),它就会变得模糊不清。有没有办法让我强制(通过Jquery / JS),以便任何#xxx链接自动偏移Z像素?

根据要求,示例链接:http://examine.com/supplements/Creatine/#ref32

3 个答案:

答案 0 :(得分:1)

因为我不得不处理这个......

HTML:

<h1><span class="offsetTarget" id="title">&#8203;</span>My Title</h1>

...

<a href="#title">This is a link</a>

CSS:

.offsetTarget { position: relative; bottom: 50px; }

50px可以是你的酒吧的高度。您需要中的 &#8203;(零宽度空间)对我来说很好。

答案 1 :(得分:0)

类似的东西:

$('a[href^=#]').offset({ top: 10, left: 10 });

答案 2 :(得分:0)

最好通过html / css更改处理此问题,而不是使用javascript来解决问题。将您的内容放在可滚动的div中,页面顶部有一个边距作为固定内容的占位符。如果你发布你的HTML,那么可以提供更具体的建议。

以下是一个例子:

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>​