Javascript 响应菜单项，链接到其在手机上不工作的部分

我正在开发WOrdPress网站，希望了解： 当我点击一个菜单项时，它会引导我进入该部分，并且内容可以完美地显示在任何屏幕大小上，我该如何使它工作呢

我的菜单在大屏幕上运行良好。当我单击“关于”时，它会转到“关于”部分。但是在移动设备上，这个过程不能正常工作。 当我加载页面并单击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 );
        }
    });

}))

这是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>  

//内容在这里
//内容在这里
//内容在这里

其他部分也是如此

<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>