Scrollspy

basic.html

<nav id="navbar_1" class="navbar fixed-top navbar-expand navbar-light bg-white">
  <a class="navbar-brand" href="#">Brand</a>
 	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav">
    	<span class="navbar-toggler-icon"></span>
  </button>
<div class="collapse navbar-collapse" id="main_nav">
	<ul class="nav nav-pills ml-auto">
		<li class="nav-item"><a href="#section_1" class="scrollto nav-link active"> Section 1 </a></li>
		<li class="nav-item"><a href="#section_2" class="scrollto nav-link"> Section 2 </a></li>
		<li class="nav-item"><a href="#section_3" class="scrollto nav-link"> Section 3 </a></li>
		<li class="nav-item"><a href="#section_4" class="scrollto nav-link"> Section 4 </a></li>
	</ul>
</div> <!-- navbar-collapse.// -->
</nav>

script.js

//  Activate bootstrap scrollspy
$('body').scrollspy({ 
    target: '#navbar_1',
    offset: 80
});

// Go to specific div with animation
$('.scrollto').click(function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top - 40  }, 1500);
    event.preventDefault();
});