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/ 如何正确实现此功能，以便每当我点击或联系它时，无需跳转到相应的部分？

Answer 1

为你的div提供一个ID，你可以这样做：

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

但JQuery动画有糟糕的表现。如果您想要非常流畅的动画，可以使用velocity.js并在此https://codepen.io/anon/pen/XKLzLQ

上举例说明

Answer 2

请尝试使用此javascript代码段。

(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);

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

2 个答案: