Html 锚链接从固定在顶部的标题下方开始
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13036142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Anchor links to start below the header which is fixed at the top
提问by Muhammed Bhikha
I have a page which has a fixed header at the top, which is 63px in height. below this I have different sections of the page (divs) which are in essence separate pages. Each section is linked in the header as an anchor link to the relevant div id. The problem I am having is that when the anchor link is clicked the top of the div starts right at the top of the document, rather than underneath the header. Any solution would be very helpful indeed.
我有一个页面，顶部有一个固定的标题，高度为 63 像素。在此之下，我有页面（div）的不同部分，它们本质上是单独的页面。每个部分都在标题中链接为相关 div id 的锚链接。我遇到的问题是，当单击锚链接时，div 的顶部从文档的顶部开始，而不是在标题下方。任何解决方案确实会非常有帮助。
CSS CODE FOR THE HEADER:
标题的 CSS 代码：
#headercontainer{ position:fixed; background-color:#1a1813; top:0px; left:0px; width:100%; height:63px; z-index:1;}
#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 CODE FOR THE FIRST SECTION (THAT SHOULD BE BELOW THE HEADER WHEN THE ANCHOR IS CLICKED:
第一部分的 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 TO POINT NEEDED:
最需要的 HTML：
<!-- 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">
回答by Muhammed Bhikha
Ive got an even better solution to this problem.
我有一个更好的解决方案来解决这个问题。
? Firstly in the css a class can be created (call it whatever you want)
? 首先在 css 中可以创建一个类（随便你怎么称呼它）
.anchor{
display:block;
height:63px; /* this is the height of your header */
margin-top:-63px; /* this is again negative value of the height of your header */
visibility:hidden;
}
? In the HTML just before your actual div section starts, for example mine is #landingcontaineryou should add a span tag with the class of anchor (which we made above) and an id of whatever you want. for me I did this :
? 在您的实际 div 部分开始之前的 HTML 中，例如，#landingcontainer您应该添加一个带有锚类（我们在上面创建的）和任何您想要的 id 的 span 标签。对我来说，我这样做了：
<span class="anchor" id="landing"></span>
Then the actual link will not now be linked to your actual div id of the section you want to take them to, but rather the id of the span tag must be given in the link.
那么实际链接现在将不会链接到您想要将它们带到的部分的实际 div id，而是必须在链接中给出 span 标签的 id。
<a href="#landing">HOME</a>
AND THERE YOU HAVE IT!
你有它！
what we are doing here in essence is making the browser stop where the span starts which is exactly the height of the header, which then makes the viewer non the wiser ;)
我们在这里所做的本质上是让浏览器停止在跨度开始的地方，这正是标题的高度，然后使查看者变得不聪明；）
回答by Mike
Just add a padding-top: 63px;to the element you're anchor linking to. ie a hypothetical <div id="sauceslanding">would have CSS of #sauceslanding { padding-top: 63px; }with a link to it of <a href="#sauceslanding">Sauces</a>.
只需将 a 添加padding-top: 63px;到您锚链接到的元素。即假设<div id="sauceslanding">将具有 CSS of#sauceslanding { padding-top: 63px; }与它的链接<a href="#sauceslanding">Sauces</a>。
Tested it, and this works for me. If it doesn't work for you, create a jsfiddle or some live test we can play around with to see if you may have a problem in your code somewhere.
测试了它，这对我有用。如果它对您不起作用，请创建一个 jsfiddle 或一些我们可以玩的实时测试，以查看您的代码中是否有问题。
UPDATE
更新
Where you have this:
你有这个：
#menucontainer{
position:relative;
width:100%;
height:700px;
background-color:#1d0f00;
padding-top:63px;
}
/* END MENU CONTAINER */
/* MENU CONTENT */
#menucontent{
position:relative;
width:1280px;
height:700px;
margin-left:auto;
margin-right:auto;
background-image:url("../images/menu/menu_bg.png");
background-size:cover;
background-repeat:no-repeat;
}
Update it to this:
将其更新为：
#menucontainer{
position:relative;
width:100%;
height:700px;
background-color:#1d0f00;
padding-top:63px;
background-image:url("../images/menu/menu_bg.png");
}
/* END MENU CONTAINER */
/* MENU CONTENT */
#menucontent{
position:relative;
width:1280px;
height:700px;
margin-left:auto;
margin-right:auto;
background-size:cover;
background-repeat:no-repeat;
}
What you'll likely see then is that the top part of the image then gets cut off as if there were no padding. What you'll need to do then is modify your background image to have an additional 63px of dead space (extend the fence pattern North). Then you're good to go.
然后您可能会看到图像的顶部被切断，就好像没有填充一样。然后您需要做的是修改您的背景图像以增加 63 像素的死区（将围栏图案向北扩展）。那你就可以走了。
回答by cbmtrx
I have a pageful of <p class="paragraph" id="#uniqueid">tags and so there's no preset/predictable height on the elements. The solution that worked best--without wreaking havoc on the rest of the established CSS/layout--was this one from CSS-tricks:
我有很多<p class="paragraph" id="#uniqueid">标签，因此元素上没有预设/可预测的高度。最有效的解决方案——不会对已建立的 CSS/布局的其余部分造成严重破坏——是来自CSS-tricks 的解决方案：
div#container p.paragraph:before {
content: " ";
margin-top: -180px;
height: 180px;
visibility: hidden;
}
Nothing else needed.
其他什么都不需要。
(FYI to anyone who is thinking of using this solution: it works as long as you don't need anything in the affected element to be clickable/selectable as this method appears to mess with actual on-screen position of things. But fine for casual browsing.)
（仅供考虑使用此解决方案的任何人：只要您不需要受影响元素中的任何内容可点击/可选择，它就可以工作，因为此方法似乎与实际屏幕上的事物位置混乱。但对于随意浏览。）
