Add functionality to have an accelerating scroll effect when a nav link is clicked (portfolio page)

[shelbourn]

See here for example: http://codepen.io/samiralibabic/pen/eZjEjL

[shelbourn]

This issue was successfully fixed using jQuery. The HTML href's needed to be modified as indicated below in order for the jQuery function to target them correctly.

HTML --

<div id="home" class="jumbotron-fluid">

and

<div id="bio" class="jumbotron-fluid">

...are examples.

With the Nav Links looking like this...

<div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#home">Home</a></li>
        <li><a href="#bio">Bio</a></li>
     </ul>
</div>

Here is the jQuery function --

$(document).ready(function() {
    $(function() {
      $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html, body').animate({
              scrollTop: target.offset().top-50
            }, 1000);
            return false;
          }
        }
      });
    });
});