                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /网页定位导航特效

动画效果来了

/*将html中menu的a链接属性href换成data-href，将作者js代码中的href换成data-href,增加锚点链接click事件，实现动画效果!
 <div id="menu">
	  <ul>
		  <li><a data-href="#item1" class="current">1F 男装</a></li>
		  <li><a data-href="#item2">2F 女装</a></li>
		  <li><a data-href="#item3">3F 美妆</a></li>
		  <li><a data-href="#item4">4F 数码</a></li>
		  <li><a data-href="#item5">5F 母婴</a></li>
	  </ul>
  </div>
*/      
$(function(){
	
	$(window).scroll(function(){
		 var top = $(document).scrollTop();
         var menu = $('#menu');
         var items = $('#content').find('.item');
		 var currentId = "";
		 items.each(function() {
            var m=$(this);
			var itemTop=m.offset().top;
			if(top>itemTop-200){
				currentId='#'+m.attr('id');
			}else{
				return false;	
			}
        });
		var currentLink=menu.find('.current');
		if(currentId && currentLink.attr('data-href')!=currentId){
			currentLink.removeClass('current');
			menu.find('[data-href='+currentId+']').addClass('current');
		}
	})
	$('#menu').find('a').each(function() {
       var menubar=$(this).attr('data-href');
	   var alink=$('#menu').find('[data-href='+menubar+']');
	   alink.click(function() {
		   $("html,body").stop().animate({scrollTop: $(menubar).offset().top},1000);
  	  })	
    });	
})