Javascript 如何使用转换将菜单项链接到其右侧部分

我正试图实现我的jsfiddle:在Wordpress站点中显示的相同原则

所以我的navbar.js目前是这样的：

(function( $ ){   
   $(document).ready(function(){
       $(".burguer-nav").on("click", function(){
          $("header nav ul").toggleClass("open");  
       });        
       function scrollToAnchor(aid){
            var aTag = $("a[name='"+ aid +"']");
            $('html,body').animate({scrollTop: aTag.offset().top},'slow');
            $("header nav ul li:first-child a").addClass("about-item");
            $("header nav ul li:last-child a").addClass("contact-item");
        }
        $(".about-item").click(function() {
           scrollToAnchor('about-us');
        });
        $(".contact").click(function() {
           scrollToAnchor('contact');
        });
   });    
})(jQuery);

这就是我的一个部分的样子：

<a name="about-us"></a>    
<section class="about container about-marker">           
    <?php               
    $queryposts = array(                            
        'post__in' => array(7),                 
        'post_type' => 'page',                
        'posts_per_page' => -1,                  
        'order' => 'ASC'             
        );                     
    $lastblog = new WP_Query( $queryposts );                        
    if($lastblog->have_posts() ):                
        while($lastblog->have_posts()): $lastblog->the_post(); ?>                    
            <?php the_content(); ?>                  
                <?php endwhile;            
                endif;                        
                wp_reset_postdata();       
                ?>    
</section>

如何正确实现此功能，以便无论何时单击about或contact，它都会转到相应的部分而不必跳转
 给你的div一个ID，你可以这样做：

$('html, body').animate({
    scrollTop: $("#myDiv").offset().top
}, 2000);

但是jqueryanimate的性能很差。如果你想要真正流畅的动画，你可以使用它并以此为例，请尝试这个javascript代码片段


（函数（$）{
$（文档）.ready（函数（）{
$（“#主菜单>li>a”）。在（“单击”上，函数（事件）{
event.preventDefault（）；
var bookMark=$（this.attr（“href”）.substring（1，$（this.attr（“href”）.length）；
bookMarkTag=$（“a[name='”+bookMark+']）；
如果（书签！==未定义）{
$（'html，body'）.animate（{scrollTop:bookMarkTag.offset（）.top}，Math.floor（bookMarkTag.offset（）.top））；
}
})
});
})（jQuery）我不太明白。您发送的代码段不起作用。哎呀，这个代码笔在safari上性能良好，但在chrome上不起作用。可能库导入不好。但是，如果您看一看，有一个很好的例子可以让您使用velocity.jsI轻松滚动。jsI更新了codepen.io链接。它现在起作用了，你可以再试一次，但我想第一个问题需要先解决。如果你检查元素，你会发现我试图添加到链接中的类没有被添加…这意味着函数中有问题，你会尝试现在实现，并让你知道我是否发现了任何约束。我已经编辑了上面的答案，请使用上面的javascript代码片段并检查。谢谢这确实会有所不同，但是…看起来越往下看，向下滚动的速度就越快。当我点击“关于项目”时，它会转到“关于”部分。当我点击“产品和服务”时，它会快一点。如果我点击“联系人”下的，它会快得多。有没有办法控制速度？我已经修改了代码，使之成为一个恒定的速度，你可以在动画功能中用第二个参数乘/除一些数字来改变恒定的速度。实际上，第二个参数表示它将对该元素设置动画的时间，因此必须根据可变距离指定可变时间。希望有帮助！这真的有很大的不同。但是我怎样才能控制速度呢？比方说，我希望它能快一点。@Wosley Alarico。取消激活widgetkit滑块，并查看当您单击cotact us时是否仍会暂停