Question

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

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

Answer 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可以是你的酒吧的高度。您需要中的，（零宽度空间）对我来说很好。

Answer 2

类似的东西：

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

Answer 3

最好通过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>

修改#link的偏移量？

3 个答案: