有没有办法在css中设置锚点？答案

【问题标题】：Is there a way to margin an anchor in css?有没有办法在css中设置锚点？
【发布时间】：2012-03-09 10:19:36
【问题描述】：

我有一个固定的标题高度 50 像素。在我的身体里，我有很多锚。问题是，当我点击指向锚点的链接时，锚点出现在我的固定标题下，我丢失了 50 像素的内容（我需要向上滚动 50 像素才能阅读标题下的内容）。

有没有办法将锚定边缘设置为 50 像素？我的身体充满了很多盒子（div），它们之间有一个边距，所以我不能放置一个 50px 的空 div，然后在它后面锚定..

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:

#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;
}

【问题讨论】：

这可以帮助固定标题的锚链接：pixelflips.com/blog/anchor-links-with-a-fixed-header

标签： html css anchor

【解决方案1】：

如果标题确实是固定的，则将锚点放在可滚动的 div 中。然后包含锚点的 div 将滚动而不是整个页面。访问小提琴并单击anchor1。它转到anchor2。以此类推。

http://jsfiddle.net/mrtsherman/CsJ3Y/3/

css - 在 body 上设置溢出隐藏以防止默认滚动。在设置了顶部和底部的新内容区域上使用绝对位置。这会强制它拉伸以适应剩余的视口窗口。

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

<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>

【讨论】：

我更新了我的初始帖子。看看我的代码..我尝试使用 overflow-y: scroll 但是，它仍然无法正常工作..
不是所有浏览器都支持Overflow-y。
@mrtsherman I 当我单击anchor1 时，我需要查看“Anchor1”及其内容。 anchor2 也是一样的。
jsfiddle.net/CsJ3Y/1 用firefox很好用，但是用chrome就不行了
这只是一个例子。您不能在 jsfiddle 中向 url 添加井号。哈希的目标是 html 中包含 id 或 name 的任何元素。因此，如果您交换了 href 值，它们会自动返回。

【解决方案2】：

欢迎来到未来：

.box {
  scroll-margin-top: 50px;
}

来源：https://css-tricks.com/almanac/properties/s/scroll-margin/

【讨论】：

【解决方案3】：

如果你使用 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');
            }
        });
    }
}

然后将“jquery_anchor”类添加到您的锚点

【讨论】：

我错过了一些东西。什么叫“scrollToAnchor()”？？
我把它放在一个函数中，让它在 ajax 中工作。它通过 $(document).ready() 在文档加载时调用，但在每次 ajax 往返后通过回调调用。
我终于想通了.. 实际上我添加了： // 拦截所有锚点点击 jQuery("body").on("click", "a", scrollToAnchor);

【解决方案4】：

对于纯 CSS 解决方案，只需使用另一个带有相反边距的 div :)

<style>
.anchor {
     margin-top: -50px; 
     margin-bottom: 50px;
}
</style>

<div id="n1" class="anchor"></div>
<div class="box"></div>

【讨论】：

【解决方案5】：

// 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;}

【讨论】：

这是一个很好的答案

【解决方案6】：

这是一个旧线程，我知道 - 但也许其他人也有同样的问题。

机会正在为每个锚定的 div 设置顶部填充，如下所示：

.box{ 填充顶部：50px； ... }

现在，您的锚滚动将在没有任何空容器的情况下到达框，并且您在 CSS 中添加的填充将为您提供空间，以便直接在标题下方显示内容。

【讨论】：