亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

動畫效果來了

/*將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 回答

您好,問一下為什么不用head-href,只用href點擊的時候網頁會閃呢?

0 回復 有任何疑惑可以回復我~
#1

潯無涯

是data-href,打錯了,求解
2016-04-11 回復 有任何疑惑可以回復我~

謝謝兄臺的分享,

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
網頁定位導航特效
  • 參與學習       71395    人
  • 解答問題       504    個

本課程講解網頁定位導航特效,仿天貓版地狗購物網,你值得擁有

進入課程

動畫效果來了

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號