【发布时间】：2012-10-23 17:38:55
【问题描述】：
我有一个页面，顶部有一个固定的标题，高度为 63 像素。 在此之下，我有页面的不同部分（div），它们本质上是单独的页面。 每个部分都在标题中链接为相关 div id 的锚链接。 我遇到的问题是，当单击锚链接时，div 的顶部从文档顶部开始，而不是在标题下方。 任何解决方案都会非常有帮助。
标题的 CSS 代码：
#headercontainer{ position:fixed; background-color:#1a1813; top:0px; left:0px; width:100%; height:63px; z-index:1;}
#headercontent{
position:relative;
background-image:no-repeat;
top:0px;
left:0px;
width:1280px;
margin-left:auto;
margin-right:auto;}
第一部分的 CSS 代码（点击锚点时应位于标题下方：
#landingcontainer{
margin-top:63px;
position:relative;
width:100%;
height:700px;
background-color:#000000;}
#landingcontent{
position:relative;
width:1280px;
height:700px;
margin-left:auto;
margin-right:auto;
background-image:url("../images/landing/landing_bg.png");
background-repeat:no-repeat;
}
需要的HTML UP：
<!-- START BODY CONTAINER -->
<div id="bodycontainer">
<!-- START HEADER -->
<div id="headercontainer">
<!-- START HEADER CONTENT -->
<div id="headercontent">
<div id="headerbg">
<a href="#landingcontainer"><div id="headerlogo"></div></a>
<div id="headercard"></div>
<div id="headernavigation">
<ul>
<a href="#menucontainer"><li>Menu</li></a>
<li>Sauces</li>
<li>Ranches</li>
<li>Order</li>
<li>Franchise</li>
<li>About</li>
</ul>
</div>
<div id="headersociallinks"></div>
</div>
</div>
<!-- END HEADER CONTENT -->
</div>
<!-- END HEADER -->
<!-- START LANDING SECTION -->
<div id="landingcontainer">
【问题讨论】：
-
margin-top: 63pxonlandingcontainer应该可以工作。您是否尝试过制作padding-top: 63px？如果这不起作用，我怀疑你在某处有一些无效的 HTML。 -
我尝试过填充和边距。它们都在页面加载时工作。标题下方的部分从它应该开始的地方开始，这很好，但是问题是当单击锚链接时，该部分会直接推到文档的顶部。即顶部缺少 63 像素。
-
虽然有更好的方法来完成我认为您正在尝试完成的事情，但您的测试代码按您说的那样工作。我没有看到任何问题。您还有可能影响结果的代码吗？
-
有没有办法用 Jquery 偏移量做到这一点？