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

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/JRn​​Dz /

问题： 当您单击名为“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-indexes 玩一下它的工作原理：http: //jsfiddle.net/JRn​​Dz /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>

请参阅：固定位置导航栏隐藏锚点