                        课程
                    
                        /前端开发
                        
                            /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);
        })  
    }); 
})