Html 有没有办法在 css 中设置一个锚点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9338033/
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
Is there a way to margin an anchor in css?
提问by Pier-Alexandre Bouchard
I have a fixed header height 50px. In my body, I have a lot of anchors. The problem is that, when I click on links pointing to anchors, the anchor appears under my fixed header and I lose 50px of content (I need to scroll up of 50px to read content under the header).
我有一个固定的标题高度 50px。在我的身体里，我有很多锚。问题是，当我点击指向锚点的链接时，锚点出现在我的固定标题下，我丢失了 50 像素的内容（我需要向上滚动 50 像素才能阅读标题下的内容）。
Is there a way to margin an anchor of 50px? My body is filled with a lot of box (divs) with a margin between themself, so I can't put in place an empty div of 50px and then anchor after it..
有没有办法将锚定为 50px？我的身体充满了很多盒子（div），它们之间有一个边距，所以我不能放置一个 50px 的空 div 然后锚定在它之后..
html:
html：
<div id="header"></div>
<div id="content">
<div class="box" id="n1"></div>
<div class="box" id="n2"></div>
<div class="box" id="n3"></div>
</div>
css:
css：
#header{
height: 40px;
width: 100%;
margin: 0px;
padding: 0px;
position: fixed;
text-align: center;
z-index:2;
}
#content{
padding-top: 50px;
margin: 0px;
}
.box {
width: 80%;
margin-left: auto;
margin-right: auto;
vertical-align : top;
padding: 1.4%; /* Keep it in percent (%) */
margin-bottom: 30px;
min-height: 200px;
}
采纳答案by mrtsherman
If the header is truly fixed then place your anchors in a scrollable div. Then the div containing the anchor will scroll instead of the entire page. Visit the fiddle and click on anchor1. It goes to anchor2. And so forth.
如果标题确实固定，则将您的锚点放在可滚动的 div 中。然后包含锚点的 div 将滚动而不是整个页面。访问小提琴并单击anchor1。它转到anchor2。等等。
http://jsfiddle.net/mrtsherman/CsJ3Y/3/
http://jsfiddle.net/mrtsherman/CsJ3Y/3/
css - set overflow hidden on body to prevent default scrolling. Use position absolute on the new content area with top and bottom set. This forces it to stretch to fit the remaining viewport window.
css - 设置溢出隐藏在身体上以防止默认滚动。在顶部和底部设置的新内容区域上使用绝对位置。这会强制它拉伸以适应剩余的视口窗口。
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
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>?
回答by ndemoreau
If you use jQuery, you use this function:
如果您使用 jQuery，则使用此函数：
function scrollToAnchor() {
if($(".jquery-anchor").length > 0 && document.URL.indexOf("#") >= 0){
var anchor = document.URL.split("#")[1];
$(".jquery-anchor").each(function() {
if($(this).attr("name") == anchor) {
$("html,body").animate({
scrollTop: $(this).offset().top - 50},
'slow');
}
});
}
}
then add the class "jquery_anchor" to your anchor
然后将类“jquery_anchor”添加到您的锚点
回答by Arziel
For Pure CSS solution just use another div with oposited margin :)
对于纯 CSS 解决方案，只需使用另一个带有对置边距的 div :)
<style>
.anchor {
margin-top: -50px;
margin-bottom: 50px;
}
</style>
<div id="n1" class="anchor"></div>
<div class="box"></div>
回答by user10301101
It is an old thread, i know - but maybe other people has the same question.
这是一个旧线程，我知道 - 但也许其他人也有同样的问题。
An Opportunity is setting a top padding to each anchored div like this:
一个机会正在为每个锚定的 div 设置一个顶部填充，如下所示：
.box{ padding-top: 50px; ... }
.box{ padding-top: 50px; ... }
Now your anchor scroll will reach the box without any empty containers before, and the padding you add in CSS will give you the space to show the content directly under your header.
现在，您的锚点滚动将到达之前没有任何空容器的框，并且您在 CSS 中添加的填充将为您提供直接在标题下方显示内容的空间。
回答by mrrmx
// For modern browsers, just add the CSS3 :target selector to the page.
// This will apply to all the anchors automatically.
// ref: http://stackoverflow.com/a/21707103/6220029
:target {
display: block;
position: relative;
top: -120px;
visibility: hidden;}
