动画效果来了

来源:4-3 使用jQuery实现网页定位导航(下)

dingdingtop

2015-03-23 11:45

/*将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);
  	  })	
    });	
})


写回答 关注

2回答

  • 浔無涯
    2016-04-11 20:21:05

    您好,问一下为什么不用head-href,只用href点击的时候网页会闪呢?

    浔無涯

    是data-href,打错了,求解

    2016-04-11 20:21:42

    共 1 条回复 >

  • 茉莉520清香
    2015-12-15 16:29:24

    谢谢兄台的分享,

网页定位导航特效

本课程讲解网页定位导航特效,仿天猫版地狗购物网,你值得拥有

71404 学习 · 486 问题

查看课程

相似问题