Q:

How do I shift the page-scroll for each html section to jump to the top of each section upon clicking its corresponding link in the navbar?

I am having an issue with my page-scroll. When I click a link in the navbar it should jump to the top of that section. However, when I click a link it jumps to the middle portion of a section. Is there any way to shift the page-scroll in any way to correct this issue. Here is a link to my code on code-pen http://codepen.io/perrylivingston/pen/KzadPW?editors=1010
<nav class="navbar-collapse navbar-inverse navbar-collapse-1 navbar-fixed-top" role="navigation">

    
      
        Toggle navigation
        
        
        
      
    
    
      
        Home
About
Portfolio
Contact

A:

This should do the job, and be sure to have the js/jquery.easing.min.js file that you include at bottom page
CSS, edit
.barrier {
  top: 80px;
  position: relative;
  width: 100vw;
}

#headline {
  color: #FFFFFF;
}

JS, add 
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top-80
        }, 1000, 'easeInOutExpo');
        event.preventDefault();
    });
});

HTML, edit: put all section inside .barrier
<div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li><a class="page-scroll" href="#home">Home</a></li>
        <li><a class="page-scroll" href="#about">About</a></li>
        <li><a class="page-scroll" href="#portfolio">Portfolio</a></li>
        <li><a class="page-scroll" href="#contact">Contact</a></li>
    </ul>
</div>

