Question

HTML：

<div id="container">
    <ul>
        <li><a href="#first">first</a></li>
        <li><a href="#second">second</a></li>
        <li><a href="#third">third</a></li>
    </ul>
    <div id="somecontainer">
        <div id="first">
        </div>
        <div id="second">
        </div>
        <div id="third">
        </div>
    </div>
</div>

样本： http://jsfiddle.net/JRnDz/

问题： 当您单击名为“second”的链接时，页面应跳转到ID为“second”的div。但是，它不会显示整个div，而只显示其中的一部分（150px-50px = 100px）。 div的顶部被切断了。

问题： 单击“第二个”链接后如何显示整个div？

我做过什么： 添加相对定位和顶部：50px到容器：

#container {
  position: relative;
  top: 50px;
}

Answer 1

@ ipsnow72编写的解决方案更清晰。

如果您愿意，可以使用jquery的插件ScrollTo并使用offset参数。 http://demos.flesler.com/jquery/scrollTo/

$(...).scrollTo( '#yourelement', {offset:-50} );

Answer 2

这取决于此代码的用途，但是如果添加

#someconteiner div{
    padding-top:50px;
    margin-bottom:-50px;
    position:relative;
    display:block;
}

并使用z-index播放它有效：http://jsfiddle.net/JRnDz/2/

Answer 3

你可以试试这个：

<div id="container">
<ul>
    <li><a href="#first">first</a></li>
    <li><a href="#secondJump">second</a></li>
    <li><a href="#third">third</a></li>
</ul>
<div id="someconteiner">
    <div id="first">
    </div>
    <a name="secondJump"></a>
    <div id="second">
    </div>
    <div id="third">
    </div>
</div>
</div>

将要跳转的位置作为锚点放在要跳转到的div上方。

显然你会为第1和第3个做同样的事。

编辑：尝试从ul

中删除固定位置

Answer 4

这个怎么样：

<div id="container">
<ul>
    <li><a href="#first">first</a></li>
    <li><a href="#secondAnchor">second</a></li>
    <li><a href="#third">third</a></li>
</ul>
<div id="someconteiner">
    <div id="first">
    </div>
    <a name="secondAnchor" style="padding-top: 50px; margin-top: -50px;"></a>
    <div id="second">
    </div>
    <div id="third">
    </div>
</div>
</div>

请参阅：Fixed position navbar obscures anchors

CSS - 在固定定位元素下滚动内容？

4 个答案: