JQuery NavBar code causing scrolling to div issue

Question

Question Background:

I have a standard bootstrap NavBar that collpases to a button on mobile devices.

The Issue:

When the user clicks on an item in the NavBar dropdown list the page will scroll down to the corrosponding div. I have a piece of JQuery that collpases the dropdown menu when the item has been clicks.

Without the JQuery to close the dropdown Nav menu the page scrolls down to the div with no issues. With the JQuery the page is scrolling down but stops well after the set 10px offset.

Without the JQuery menu closing code - working:

Note the small 10px above the panel item, this is what is wanted.

enter image description here

With the JQuery closing code - Broken:

Note that the page now scrolls down past the top of the div.

enter image description here

The Code:

The NavBar:

 <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>

The JQuery Menu closing code:

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

The JQuery used to scroll to the Div as set in the NavBar menu:

$(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);
    }
});

The HTML Markup of the Panel:

<div id="Info">

    //panel HTML

</div>

I believe the issue is that the JQuery is setting the 'top' of the page as the bottom of the dropdown menu which is then causing a false offset. Any help with solving a a solution to this would be much appreciated.

DavidDomain DavidDomain · Accepted Answer · 2015-07-05T19:22:34

You are on the right track, just add the height of the #bs-example-navbar-collapse-1 to your offset.

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);
}

This should work.

JQuery NavBar code causing scrolling to div issue

1 Answers