JQuery NavBar 代码导致滚动到 div 问题

Question

问题背景：

我有一个标准的 bootstrap 导航栏，它会折叠成移动设备上的一个按钮。

问题：

当用户单击 NavBar 下拉列表中的项目时，页面将向下滚动到相应的 div。我有一个 JQuery 项目被点击时会折叠下拉菜单。

没有 JQuery 关闭下拉导航菜单，页面向下滚动到 div 没有问题。 JQuery 页面正在向下滚动，但在 设置的 10px 偏移后 很好地停止。

没有 JQuery 菜单关闭代码 - 工作：

注意面板项目上方的小 10px，这就是我们想要的。

与JQuery关闭代码- 损坏：

请注意，页面现在向下滚动到 div 的顶部。

代码：

导航栏：

 <div class="navbar">
        <nav class="navbar navbar-default navbarColour" role="navigation" id="nav">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <img src="~/Images/DC.png" class="dc">
                </div>
                <div class="middleNavPadding">
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav pull-right">
                            <li><a href="#" class="scroll-link" data-id="Info">Services</a></li>
                            <li><a href="#" class="scroll-link" data-id="Mission">Our Mission</a></li>
                            <li><a href="#" class="scroll-link" data-id="Gallery">Projects Gallery</a></li>
                            <li><a href="#" class="scroll-link" data-id="Contact">Contact Us</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </div>

JQuery菜单关闭代码：

$(document).ready(function () {
    $(".navbar-nav .scroll-link").click(function (event) {
        $(".navbar-collapse").collapse('hide');
    });
});

JQuery 用于滚动到导航栏菜单中设置的 Div：

$(document).ready(function () {
    $('.scroll-link').on('click', function (event) {
        event.preventDefault();

        var sectionID = $(this).attr("data-id");

        scrollToID('#' + sectionID, 750);
  });
    function scrollToID(id, speed) {
        var offSet = 10;
        var targetOffset = $(id).offset().top - offSet;
        $('html,body').animate({ scrollTop: targetOffset }, speed);
    }
});

面板的HTML标记：

<div id="Info">

    //panel HTML

</div>

我认为问题在于 JQuery 将页面的 'top' 设置为下拉菜单的底部，这导致了错误的偏移。任何解决此问题的解决方案的帮助将不胜感激。

Answer 1

您的方向是正确的，只需将 #bs-example-navbar-collapse-1 的 height 添加到您的偏移量即可。

function scrollToID(id, speed) {
    var offSet = 10 + $('#bs-example-navbar-collapse-1').height(); // NAVBAR HEIGHT !!!
    var targetOffset = $(id).offset().top - offSet;
    $('html,body').animate({ scrollTop: targetOffset }, speed);
}

这应该有效。