响应式菜单项链接到其不在移动设备

Question

正在开发一个WOrdPress网站并且会知道： 我怎样才能使它工作，当我点击一个菜单项时它会引导我到那个部分并且内容在任何屏幕尺寸上完美显示？

我的菜单在大屏幕上工作正常。当我点击about时，它会转到about部分。但在移动设备上，此过程无法正常运行。 当我加载页面，然后单击about菜单项时，它会转到about部分，但它会跳过该部分的大部分内容，如图所示：

当我点击about菜单项时，它应该是这样的：

因此。其他部分也会发生这种情况。

这就是我在jquery中所做的

$(document).ready(function(){
    $(".burguer-nav").on("click", function(){
       $("header nav ul").toggleClass("open"); 
    });  
    $("#primary-menu > li:first-child > a").addClass("active-menu");
    $("#primary-menu > li > a, ul#menu-menu-1 > li > a, .allcontacts a").on("click", function(event){
        event.preventDefault();
        var bookMark = $(this).attr("href").substring(1,$(this).attr("href").length);
        bookMarkTag = $("a[name='"+ bookMark +"']");
        var animateSpeed = 1000                                                        ;
        if(bookMark !== undefined) {
            $('html,body').animate({scrollTop: bookMarkTag.offset().top}, animateSpeed );
        }
    });

}）;

var num = 150; //number of pixels before modifying styles
$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('nav#site-navigation').addClass('fixed');            
    } else {
        $('nav#site-navigation').removeClass('fixed');
    }
});

这是html的结构：

<a name="home"></a>
<section id="home">
  // content goes here
</section>
<a name="about-us"></a>    
<section class="about container" id="about-us">           
   // content goes here
</section>    
<a name="products-and-services"></a>    
<section class="container  products" id="products-and-services">        
  // content goes here
</section>  

等其他部分。