Using jQuery and Bootstrap 3 I am trying to create a one page Scrolling Website. Here is theWorking Demo . So far it looks fine when user scrolls in sequence like from Section 1 to Section 2 or Section 2to Section 3 but I have some issue on nav navbar-nav items when user scrolls out of order like from Section 1 to Section 6. It looks like nav navbar-nav steps on each items to get the target item!(As you can see in following image)

There is also one other important issue on Section 7 scrolling. which it not scrolls to the same positions as other sections and there is more space. (As you can see in following image)

Here is the jquery which I used for Scrolling

1. <script>
3.     $(function() {
4.       $('a[href*=#]:not([href=#])').click(function() {
5.         if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
6. 
   
7.           var target = $(this.hash);
8.           target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
9.           if (target.length) {
10.             $('html,body').animate({
11.               scrollTop: target.offset().top
12.             }, 1000);
13.             return false;
14.           }
15.         }
16.       });
17.     });
18. </script>