Question

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

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

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

我的例子是我的网站，我目前正在尝试将其付诸实践。 http://kirisuteranza.co.uk。任何帮助将不胜感激。

Answer 1

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

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

当用户滚动时，它会保持在同一位置，而不会被菜单覆盖。

Answer 2

只需添加一行CSS -

.size1of1{
    margin-top:70px;
}

<强>编辑：

转到style.css文件。然后用 margin-top：4.375em

替换所有 margin-top：3.750em

Answer 3

如果您愿意，可以使用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>

锚标记到页面中间

3 个答案: