jQuery ScrollTo函数滚动经过元素ID

Question

我正在设计一个简单的单页网站，该网站在顶部使用导航菜单滚动到页面的各个点。 从最近开始，我无法滚动到其中一个页面。 当我尝试滚动到“关于”部分时，jQuery函数将滚动到该部分的开头并向下滚动到该部分中第一个元素的顶部。

但是，我要做的只是在该部分添加一个边框（ border: 2px dashed yellow ），然后该函数正确滚动到“ About”部分的顶部（并在最顶部显示边框）。

这是jQuery函数。 我知道这是正确的，因为菜单通常会滚动到页面正下方的“联系人”部分。

function scrollTo(element)
{
    var tag = $("#" + element + "");
    $('html, body').animate({scrollTop: tag.offset().top}, 500);
}

还有我的菜单栏HTML ...

<nav id="menuBar">
    <ul>
        <li><a href="#">Home</a>
        </li><li><a href="#" onclick="alert('This page is still under ' +
                    'construction. Sorry!')">Products</a>
        </li><li><a href="#" onclick="alert('This page is still under ' +
                    'construction. Sorry!')">Projects</a>
        </li><li><a href="#" onclick="scrollTo('aboutSection')">
                About Me</a>
        </li><li><a href="#" onclick="scrollTo('contactSection')">
                Contact Me</a></li>
    </ul>
</nav>

---

然后是关于部分的HTML

#aboutSection
{
    /* Testing purposes */
    border: 2px dashed yellow;
}

以及使其正常运行的CSS ...

 #aboutSection { /* Testing purposes */ border: 2px dashed yellow; } 

再一次，当我删除CSS的最后一行时，jQuery函数滚动到id="aboutSection"的<section>顶部，然后向下滚动至下一个元素的顶部。

---

关于部分的示例

有简单的方法可以解决此问题吗？ 让我知道是否需要添加其他内容。

Answer 1

从包含的图片中，您指向菜单栏/标题底部而不是窗口顶部的“应滚动到此处”箭头。 这使我相信菜单栏可能是一个问题-窗口的顶部可能设置为正确的高度，但菜单栏将其遮盖了。 您想要做的是滚动到该部分的顶部减去菜单栏的高度 ，以便您希望顶部的位置在导航栏的底部而不是页面的顶部：

var tag = $("#" + element + "");
var navHeight = parseInt($('#menuBar').css('height')); 
$('html, body').animate({scrollTop: tag.offset().top - navHeight}, 500);