Исправлен NavBar при прокрутке с использованием jQuery

Question

У меня есть моя навигационная панель на моей странице.Я использовал CSS и jQuery, чтобы исправить это вверху, но когда я выбираю какой-либо пункт меню в панели навигации, он не попадает в этот раздел.Дайте мне решение.

<header id="index-banner">
  <nav id="navigation" class="banner-header z-depth-0	">
    <ul class="left hide-on-med-and-down">
      <li><a href="http://localhost/project/" class="head"><span>HOME</span></a></li>
      <li><a href="#location" class="head" id="loc"><span>LOCATIONS</span></a>
        <li><a href="faq.php" class="head"><span>FAQ</span></a></li>
      </li>
    </ul>
    <a href="" class="center brand-logo"><img src="img/logo/50.png" class="banner-logo" id="mylogo"></a>
    <ul class="right hide-on-med-and-down">
      <span><li><a href="#menu" class="head">MENU</a></li></span>
      <span><li><a href="contact.php" class="head">CONTACT US</a></li></span>
      <li><img src="img/tunnsingh/face.png" id="tunnsinghface"></li>
      <li>
        <h5 id="call" class="head"><span>989898XXXX</span></h5>
      </li>
    </ul>
    <a href="#" data-activates="slide-out" class="hide-on-large-only button-collapse">&nbsp&nbsp<i class="fa fa-bars"></i></a>
    <div id="slide-out" class="side-nav hide-on-large-only">
      <img src="img/logo/50.png" id="side-nav-logo">
      <img src="img/divider/green.png" class="divide">
      <ul>
        <span><li><a href="http://localhost/project">HOME</a></li></span>
        <span><li><a href="#location" id="locm">LOCATIONS</a></li></span>
        <span><li><a href="#menu">MENU</a></li></span>
        <span><li><a href="faq.php">FAQ</a></li></span>
        <span><li><a href="contact.php">CONTACT US</a></li></span>
      </ul>
    </div>
  </nav>
  <img src="img/banner.jpg" class="hide-on-large-only" id="index-banner">
</header>

Answer 1

Вы должны определить каждый раздел с помощью атрибута "id", а затем вы должны использовать "scrollTop" для тех переходов, которые будут прокручиваться к определенным "id".

HTML-код

<a href="#target-element" class="scroll_to">Scroll to Target Element</a>

<section id=”target-element”>Target Element Content</section>

Код запроса:

jQuery('.scroll_to').click(function(e){
    var jump = $(this).attr('href');
    var new_position = $(jump).offset();
    $('html, body').stop().animate({ scrollTop: new_position.top }, 500);
    e.preventDefault();
});