如何使用javaScript访问这些id

Question

I have website with a javaScript function that should scroll to section on page when user clicks a navigation item. This script worked before I made changes to my nav menu. I can not figure out how to reference the ID's in the javaScript correctly.

Here is HTML nav menu:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Data Detective</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a id="home" href="#homeSect">HOME</a></li>
                <li><a id="about" href="#aboutSect">ABOUT</a></li>
                <li><a id="portfolio" href="#portfolioSect">PORTFOLIO</a></li>
                <li><a id="contact" href="#contactSect">CONTACT</a></li>
            </ul>
        </div>
    </div>
</div>

Here is the javaScript:

$(document).ready(function() {
setBindings();
});


//Allow screen to Scroll to selected section
function setBindings() {
    $("nav ul li a").click(function (tip) {
        tip.preventDefault();
        var sectionID = "#" + tip.currentTarget.id + "Sect";
        alert('button id ' + sectionID);

        $("html body").animate({
            scrollTop: $(sectionID).offset().top
        }, 1000);
    });
}

Answer 1

You should use .navbar class. Please change:

 $("nav ul li a").click(function (tip) {

TO

$(".navbar ul li a").click(function (tip) {

Further more, I recommend you to use var sectionID = $(this).attr('href'); instead var sectionID = "#" + tip.currentTarget.id + "Sect"; because it's more simply.

Answer 2

Your jQuery selector:

$("nav ul li a")

will search for the element <nav> (which doesn't exist).

Instead, you can use the selector:

$(".nav a")

Answer 3

I would do a more useful global function I guess. I would check for any href with an anchor reference, check if there is a div with that id, and then scroll to that one.

That way you're not limited to the menu but can use the same code everywhere. Also I made the event caputurer the top level document, so you can insert and remove elements at hearts content and it will always work without having to be rebound.

 $(document).on('click','a[href^="#"]',function(e) { var target = $(e.currentTarget).attr('href'); var $target = $(target); if($target.length > 0) { $("html body").animate({ scrollTop: $target.offset().top }, 1000); } }); 

 div.sect { margin:50px; height:400px; width:100%; background-color:gray; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li><a id="blah" href="www.google.nl">Excluded</a></li> <li><a id="home" href="#homeSect">HOME</a></li> <li><a id="about" href="#aboutSect">ABOUT</a></li> <li><a id="portfolio" href="#portfolioSect">PORTFOLIO</a></li> <li><a id="contact" href="#contactSect">CONTACT</a></li> <li><a id="blah" href="www.google.nl">Excluded</a></li> <div class="sect" id="portfolioSect"> portfolioSect </div> <div class="sect" id="homeSect"> homeSect </div> <div class="sect" id="aboutSect"> aboutSect </div> <div class="sect" id="contactSect"> contactSect </div>