看完在线教程,跟着做了个网页定位导航效果出来。即点击导航某项,跳转到该锚点。(如图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代码
尽管能够完成过渡,但是会出现“页面先闪现需要跳转的板块,再平滑过渡到该板块”的BUG。
有什么办法能解决这个问题???在线等