Javascript 将标记定位到页面中间

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

但是，锚定被放置在页面顶部，这意味着它被覆盖在内容顶部的菜单所遮挡

在不移动锚链接的情况下，可以通过JavaScript甚至CSS/HTML以某种方式获取锚链接，从而使锚链接移动到顶部的中间或下方X数量，从而使其不被菜单覆盖，并且读者可以阅读内容

---

我的例子是我的网站，我目前正试图让它工作。任何帮助都将不胜感激

只需添加一行CSS-

.size1of1{
    margin-top:70px;
}

编辑：

---

转到style.css文件。然后只需将所有边距顶部：3.750em替换为边距顶部：4.375em

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

function goTo(el) {

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

}

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

这将要求您提供锚点和

h1

元素ID属性

您需要在HTML页面的

标题中包含jQuery：

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

如果我理解正确，您希望在用户滚动时移动锚定，这样导航菜单就不会覆盖锚定。您可以使用CSS实现这一点：

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

当用户滚动时，它保持在相同的位置，而不是被菜单覆盖。
不是回答而是建议，您是否尝试过填充top:10或其他东西来将其向下移动更多。在包装区域，而不是锚点。甚至可能是你的头衔所在的h1标签也被解雇了。好的一面，但是CSS上的超负荷使它很难阅读。是的，CSS有点难阅读。抱歉，但是尝试一下这个，每一位都有特定的CSS。因此size1of1只会使aspects达到100%，然后您可以从HTML中读取它的功能。在重复的CSS编写上节省了一点，但在HTML编写上节省了很多。我已经尝试了放置填充/相对锚链接的技巧，但这似乎对锚没有什么区别，但在锚内有一个“”标记，这对我的CSS不起作用，因为它有特定的属性。因此，在需要100%宽度的地方，使用尺寸1of1。因此有很多CSS，但这使得原型制作非常快速。将他放在代码末尾的CSS之上，或者创建另一个（相同）类all div并使用此CSS。再次把这一行放在你的CSS文件的末尾。但是我肯定会允许在我的div上有一个我不想要的页边空白。我想你可以理解。好的，请看may next的评论，因为它有点大，但很容易..有点困惑如何获得这项工作。保持如上所述，其效果与正常锚链相同。在PX突出屏幕并保持在顶部之前输入一个负值。输入正值意味着锚点实际上被页面顶部遮住了，出于某种奇怪的原因，不管值是多少，它都会进入页面底部？