将标签锚定到页面中间答案

【问题标题】：Anchor Tag to Middle Of Page将标签锚定到页面中间
【发布时间】：2014-03-01 16:29:15
【问题描述】：

目前我的智慧结束了这个问题。我的页面顶部有一个导航栏，它在向下滚动时覆盖了网站的一部分。它包含的链接都是锚点（该网站目前是一个冗长的页面），当点击时页面会按预期跳转到它们。

但是，锚点位于页面顶部，这意味着它被覆盖在内容顶部的菜单所遮挡。

在不移动锚链接的情况下，是否可以使用 JavaScript 甚至 CSS/HTML 来获取它，以便锚移动到顶部的中间或下方 X 量，这样它就不会被菜单覆盖，读者可以阅读内容。

我的例子是我的网站，我目前正在尝试让它运行。 http://kirisuteranza.co.uk。任何帮助将不胜感激。

【问题讨论】：

不是一个答案，而是一个建议，您是否尝试过 padding-top:10 或其他将其向下移动的东西。在 Wrapper 区域不是锚。甚至可能包含被解雇的标题的 h1 标签。不错的一面，但 CSS 的超载使其难以阅读。
是的，CSS 有点难读。抱歉，但尝试一下，每个位都有特定的 CSS。所以 size1of1 只使方面 100%，然后你可以从 HTML 中读取它的作用。节省了一些重复的 CSS 编写，但更多的 HTML 编写。我尝试过放置填充/相对锚链接的技巧，但似乎没有什么区别
不是锚点，而是锚点内部有一个'
'标签

标签： javascript jquery html css

【解决方案1】：

如果您愿意，可以使用 jQuery：

function goTo(el) {

    $('html, body').animate({
        scrollTop: el.offset().top + 'px'
    }, 'fast');

}

$('#about-button').on('click',function() {
    goTo( $('#about-section') );
});

这将要求您提供锚点和h1 元素的 ID 属性。

您需要在 HTML 页面的 head 中包含 jQuery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

【讨论】：

有点困惑如何完成这项工作。如上所示保留它与普通锚链接具有相同的效果。在 PX 使屏幕跳动并保持在顶部之前输入一个负值。放入正值意味着锚点实际上被页面顶部遮挡，并且出于某种奇怪的原因，无论该值如何，它都只是进入页面底部？

【解决方案2】：

如果我理解正确，您希望在用户滚动时移动锚点，以便导航菜单不会覆盖它。你可以用 CSS 做到这一点：

.anchor
{
position: absolute;
top: 20px; /* According to size of menu */
left: 650px;
}

当用户滚动时，它会停留在相同的位置，不会被菜单重叠。

【讨论】：

【解决方案3】：

只需添加一行CSS-

.size1of1{
    margin-top:70px;
}

已编辑：

转到您的 style.css 文件。然后只需将所有 margin-top:3.750em 替换为 margin-top:4.375em

【讨论】：

不适用于我的 CSS，因为它具有特定的属性。所以 size1of1 非常用在需要 100% 宽度的地方。正因为如此，有很多 CSS，但原型制作非常快。
将他放在代码末尾的 CSS 之上，或者将另一个（相同的）类全部设为 div 并使用此 CSS。再次将此行放在 CSS 文件的末尾。
但是我肯定会在我的 div 上有一个我不想要的边距顶部？
我以为你能理解。好的，请参阅下一条评论，因为它有点大但很容易......

'标签