html锚点平滑跳转,关于锚点平滑跳转时的问题

看完在线教程,跟着做了个网页定位导航效果出来。即点击导航某项,跳转到该锚点。(如图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代码

7d68e3a802e25224ad7d79233c6c2a0d.png

52a296324dc70a606569a3d420f9b27a.png

0712f7968067e6f215efca890ae74f3b.png

8f5de827253b27f9c20d5e2d849c1e81.png

f425d9bcd1b17ecea6444c80c297a2dc.png

尽管能够完成过渡,但是会出现“页面先闪现需要跳转的板块,再平滑过渡到该板块”的BUG。

有什么办法能解决这个问题???在线等

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值