如何通过转换将菜单项链接到其右侧部分

Question

我正在尝试实现我的 jsfiddle:http://jsfiddle.net/BjpWB/4/ 在我的 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>

但似乎我的函数 scrollToAnchor 没有采取任何行动，因为当我检查元素时，我没有看到添加到 a 标签的类。 这是正在处理的网站：http://scentology.burnnotice.co.za/ 如何正确实现此功能，以便每当我单击 about 或 contact 时，它都会转到相应的部分而无需跳转？

Answer 1

给你的 div 一个 ID，你可以这样做：

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

但是 JQuery animate 的性能很差。如果你想要真正流畅的动画，你可以使用velocity.js 并以https://codepen.io/anon/pen/XKLzLQ 为例

Answer 2

请试试这个 javascript sn-p。

(function( $ ){   
	$(document).ready(function () {

		$("#primary-menu > li > a").on("click", function(event){
			event.preventDefault();
			var bookMark = $(this).attr("href").substring(1,$(this).attr("href").length);
			bookMarkTag = $("a[name='"+ bookMark +"']");
			if(bookMark !== undefined) {
				$('html,body').animate({scrollTop: bookMarkTag.offset().top}, Math.floor(bookMarkTag.offset().top));
			}
			
		})
	});

})(jQuery);