title: Navbar to scroll to position after click
body: <p>Hi guys so i am trying to do some js work and learn and i wanted to create a simple navbar so when the user clicks on it , it will take them to that section of the screen, which is all on one page, however the way i have done it seems very long and bad and i was wondering if there is an easier way to do it? or maybe a library that does it for you etc. If anyone could show me a tutorial or something that could help </p>
  
  <p><a href="https://jsfiddle.net/4h04uzza/7/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p>html:</p>
  
  <pre><code>  &lt;nav class="navbar navbar-default" data-spy="affix" data-offset-top="10"&gt;
      &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
        &lt;/div&gt;
        &lt;div id="navbar" class="navbar-collapse collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li&gt;&lt;a href="#a"&gt;a&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#b"&gt;b&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#c"&gt;c&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#d"&gt;d&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
  &lt;div id="a"&gt;&lt;/div&gt;
  &lt;div id="b"&gt;&lt;/div&gt;
  &lt;div id="c"&gt;&lt;/div&gt;
  &lt;div id="d"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function () {
      $(document).on("scroll", onScroll);
  
      //smoothscroll
      $('a[href^="#"]').on('click', function (e) {
          e.preventDefault();
          $(document).off("scroll");
  
          $('a').each(function () {
              $(this).removeClass('active');
          })
          $(this).addClass('active');
  
          var target = this.hash,
              menu = target;
          $target = $(target);
          $('html, body').stop().animate({
              'scrollTop': $target.offset().top+2
          }, 500, 'swing', function () {
              window.location.hash = target;
              $(document).on("scroll", onScroll);
          });
      });
  });
  
  function onScroll(event){
      var scrollPos = $(document).scrollTop();
      $('#navbar a').each(function () {
          var currLink = $(this);
          var refElement = $(currLink.attr("href"));
          if (refElement.position().top &lt;= scrollPos &amp;&amp; refElement.position().top + refElement.height() &gt; scrollPos) {
              $('#navbarr ul li a').removeClass("active");
              currLink.addClass("active");
          }
          else{
              currLink.removeClass("active");
          }
      });
  }
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>affix {
    top: 0;
    width: 100%
  }
  
  
  .affix + .section {
    margin-top: 68px;
  }
  
  .navbar {
    margin-bottom: 0px;
    left: 0;
    top: 0;
    width: 100%;
    list-style: none;
    height: 70px;
    z-index: 1
  }
  
  .navbar-nav {
    float: none;
    margin: 0;
    text-align: center
  }
  
  .navbar-nav&gt;li {
    float: none;
    display: inline-block
  }
  
  .navbar-nav&gt;li&gt;a {
    line-height: 38px
  }
  
  .navbar-nav&gt;li&gt;a.active {
    background-color: #E7E7E7
  }
  
  .navbar-default .navbar-nav&gt;li&gt;a:hover, .navbar-default .navbar-nav&gt;li&gt;a:focus {
    color: #333333;
    background-color: #E7E7E7
  }
  
  .navbar-toggle {
    background-color: #000000;
    background-image: none;
    border-radius: 4px;
    float: right;
    margin-bottom: 8px;
    margin-right: 15px;
    margin-top: 18px;
    padding: 9px 10px;
    position: relative
  }
  
  .navbar-inverse .navbar-toggle .icon-bar {
    background-color: #2DCC70
  }
  
  .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #000000
  }
  
  .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: transparent
  }
  
  #a{
    height: 700px; 
    background-color: Red;
  }
  
  #b{
    height: 700px; 
    background-color: blue;
  }
  
  #c{
    height: 700px; 
    background-color: yellow;
  }
  
  #d{
    height: 700px; 
    background-color: black;
  }
  </code></pre>