看完在线教程,跟着做了个网页定位导航效果出来。即点击导航某项,跳转到该锚点。(如图1)
然后我在此基础上想添加平滑过渡。(如图1的click事件)
图1 - js代码
$(document).ready(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 item = menu.find('.current');
if(item.attr('href') != currentId){
item.removeClass('current');
menu.find('[href='+currentId+']').addClass('current');
}
});
$('a[href*=#]').click(function(){
var target = $($(this).attr("href")).offset().top + "px";
$('html,body').animate({
scrollTop: target
}, 500)
})
});
图2 - html代码
<div id="menu">
<h1>正在首发</h1>
<ul>
<li><a href="#item1" class="current"><strong>2014.04.09</strong><br>施华蔻0元赢Smart</a></li>
<li><a href="#item2"><strong>2014.04.05</strong><br>alienware机皇限量抢</a></li>
<li><a href="#item3"><strong>2014.04.04</strong><br>联想Miix2 3G平板电脑</a></li>
<li><a href="#item4"><strong>2014.04.03</strong><br>御爵厨房垃圾处理器</a></li>
<li><a href="#item5"><strong>2014.04.01</strong><br>中兴天机GRAND S II</a></li>
</ul>
</div>
<div id="content">
<div id="item1" class="item">
<img src="http://img.mukewang.com/536ca02800014e7105000400.jpg">
</div>
<div id="item2" class="item">
<img src="http://img.mukewang.com/536ca04b0001dbeb04520519.jpg">
</div>
<div id="item3" class="item">
<img src="http://img.mukewang.com/536ca06200016a4d03950387.jpg">
</div>
<div id="item4" class="item">
<img src="http://img.mukewang.com/536ca0ab0001c89205000400.jpg">
</div>
<div id="item5" class="item">
<img src="http://img.mukewang.com/536ca0830001b17f05000400.jpg">
</div>
</div>
尽管能够完成过渡,但是会出现“页面先闪现需要跳转的板块,再平滑过渡到该板块”的BUG。
有什么办法能解决这个问题???在线等
click事件最后一行增加
return false;