<div class="container" id="top">
    <div class="page-header">
    <h1>Smooth Scroll to div ID or Name Anchor</h1>
  </div><!--  /page-header  -->

   
   <a href="#comments" >Scroll to comments</a>
   
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga dolore voluptas sint cupiditate, necessitatibus distinctio voluptatum atque inventore maxime sequi provident, repudiandae nisi nam ullam voluptatibus dolorum, debitis maiores.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga dolore voluptas sint cupiditate, necessitatibus distinctio voluptatum atque inventore maxime sequi provident, repudiandae nisi nam ullam voluptatibus dolorum, debitis maiores.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga dolore voluptas sint cupiditate, necessitatibus distinctio voluptatum atque inventore maxime sequi provident, repudiandae nisi nam ullam voluptatibus dolorum, debitis maiores.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga dolore voluptas sint cupiditate, necessitatibus distinctio voluptatum atque inventore maxime sequi provident, repudiandae nisi nam ullam voluptatibus dolorum, debitis maiores.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga dolore voluptas sint cupiditate, necessitatibus distinctio voluptatum atque inventore maxime sequi provident, repudiandae nisi nam ullam voluptatibus dolorum, debitis maiores.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga dolore voluptas sint cupiditate, necessitatibus distinctio voluptatum atque inventore maxime sequi provident, repudiandae nisi nam ullam voluptatibus dolorum, debitis maiores.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga dolore voluptas sint cupiditate, necessitatibus distinctio voluptatum atque inventore maxime sequi provident, repudiandae nisi nam ullam voluptatibus dolorum, debitis maiores.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga dolore voluptas sint cupiditate, necessitatibus distinctio voluptatum atque inventore maxime sequi provident, repudiandae nisi nam ullam voluptatibus dolorum, debitis maiores.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga dolore voluptas sint cupiditate, necessitatibus distinctio voluptatum atque inventore maxime sequi provident, repudiandae nisi nam ullam voluptatibus dolorum, debitis maiores.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga dolore voluptas sint cupiditate, necessitatibus distinctio voluptatum atque inventore maxime sequi provident, repudiandae nisi nam ullam voluptatibus dolorum, debitis maiores.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga dolore voluptas sint cupiditate, necessitatibus distinctio voluptatum atque inventore maxime sequi provident, repudiandae nisi nam ullam voluptatibus dolorum, debitis maiores.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga dolore voluptas sint cupiditate, necessitatibus distinctio voluptatum atque inventore maxime sequi provident, repudiandae nisi nam ullam voluptatibus dolorum, debitis maiores.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga dolore voluptas sint cupiditate, necessitatibus distinctio voluptatum atque inventore maxime sequi provident, repudiandae nisi nam ullam voluptatibus dolorum, debitis maiores.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga dolore voluptas sint cupiditate, necessitatibus distinctio voluptatum atque inventore maxime sequi provident, repudiandae nisi nam ullam voluptatibus dolorum, debitis maiores.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga dolore voluptas sint cupiditate, necessitatibus distinctio voluptatum atque inventore maxime sequi provident, repudiandae nisi nam ullam voluptatibus dolorum, debitis maiores.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga dolore voluptas sint cupiditate, necessitatibus distinctio voluptatum atque inventore maxime sequi provident, repudiandae nisi nam ullam voluptatibus dolorum, debitis maiores.</p>

   <div id="comments">
   <h2>Comments section</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga dolore voluptas sint cupiditate, necessitatibus distinctio voluptatum atque inventore maxime sequi provident, repudiandae nisi nam ullam voluptatibus dolorum, debitis maiores.</p>
   </div>
   <a href="#top" >To the top</a>
</div>
$(document).ready(function() {

    $("a[href*=#]").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    });
   
   
// document ready  
});


External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js