How to access this id using javaScript

Question

I have a website with a javaScript function that should scroll to the section on the page when the user clicks the navigation item. This script worked before I made changes to my navigation menu. I cannot figure out how to properly refer to ID in javaScript.

Here is the HTML navigation 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 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 must use the .navbar class. Please change:

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

TO

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

In addition, I recommend using var sectionID = $(this).attr('href'); instead of var sectionID = "#" + tip.currentTarget.id + "Sect"; because it is easier.

Answer 2

Your jQuery selector:

 $("nav ul li a") 

will search for the <nav> element (which does not exist).

You can use the selector instead:

 $(".nav a") 

Answer 3

I would make a more useful global function, I think. I would look at some href with a link to the binding, check if there is a div with this id, and then scroll through the list before that.

Thus, you are not limited to this menu, but you can use the same code everywhere. I also made the caputurer event of a top-level document, so that you can insert and remove elements in the contents of hearts, and it will always work without the need for a 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>