Her html bölümü için sayfa kaydırma işlevini, navbar'daki ilgili bağlantıyı tıklatarak her bölümün başına atlamak için nasıl kaydırırım?

Question

Sayfa kaydırmayla ilgili bir sorun yaşıyorum. Navbardaki bir bağlantıyı tıklattığımda, o bölümün üstüne atlamalıdır. Bununla birlikte, bir bağlantıyı tıklattığımda bir bölümün orta kısmına atlar. Bu sorunu düzeltmek için sayfa kaydırma işlemini herhangi bir şekilde değiştirmek için herhangi bir yol var mı? İşte kod-kalem benim kod bağlantısıdır http://codepen.io/perrylivingston/pen/KzadPW?editors=1010

<nav class="navbar-collapse navbar-inverse navbar-collapse-1 navbar-fixed-top" role="navigation"> 

Geçiş navigasyon

Ev

Hakkında

Portföy

İletişim

Answer 1

Bu işi yapmak ve alt sayfa

CSS de dahil js/jquery.easing.min.js dosya emin olun

.barrier { 
    top: 80px; 
    position: relative; 
    width: 100vw; 
} 

#headline { 
    color: #FFFFFF; 
} 

JS düzenlemek eklemek gerekir

//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, düzenle: tüm bölümleri içine koyun .barrier