/*將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);
?? ??})
????});
})
2016-04-11
您好,問一下為什么不用head-href,只用href點擊的時候網頁會閃呢?
2015-12-15
謝謝兄臺的分享,