Bootstrap3 - Slide to correct ID on page for selected item

Question

I'm using bootstrap3 on a small page I'm putting together and have the links working fine within the nav.

For example you click 'about' on the nav, and it takes you to #about on the page - but it does so immediately. I would like it to 'slide' to the #about portion of the page but have no idea how to accomplish this using jquery.

I'm not sure if this is a built in feature or not but any help would be appreciated.

My navbar looks like this:

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#"><img src="./images/logos/tsds-sm-logo.png"></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#service">Service</a></li>
            <li><a href="#products">Products</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <p id="navbar-phone">Contact Us: 555-555-0555</p>
        </div>
      </div>
    </nav>

For example sake - my #about section looks like this:

    <a name="about" id="about"></a>
<section id="par-content" data-speed="4" data-type="background" >

  <div class="row featurette">        
    <div class="col-md-7">
    <h2 class="featurette-heading">Lorum Ipsum <span class="text-muted">Lorum Ipsum</span></h2>
      <p class="lead">Lorum Ipsum</p>

      <p><a class="btn btn-primary btn-lg" href="#" role="button">&laquo; Find Out How We Can Help &raquo;</a></p>
    </div>
    <div class="col-md-5">
      <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Trendy Image" src="images/trendy-image.jpg">
    </div>
  </div>
<a name="service" id="service"></a>     
  <hr class="featurette-divider">

  <div class="row featurette">
    <div class="col-md-5">
      <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image" src="images/some-trendy-image.jpg">
    </div>
    <div class="col-md-7">
      <h2 class="featurette-heading">Lorum Ipsum</span></h2>
      <p class="lead">Lorum Ipsum</p>


      <p><a class="btn btn-primary btn-lg" href="#" role="button">&laquo; Find Out How We Can Help &raquo;</a></p>

    </div>
  </div>

  <hr class="featurette-divider">

  <div class="row featurette">
    <div class="col-md-7">
      <h2 class="featurette-heading">Lorum Ipsum <span class="text-muted">Lorum Ipsum</span></h2>
      <p class="lead">Blah blah blah</p>
    </div>
    <div class="col-md-5">
      <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
    </div>
  </div>

</section>

Answer 1

I found some rough guides online and have utilized the following to get it to work:

   $(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});
});

Any advice to the rightness/wrongness of this answer is encouraged.