楼层导航奇葩问题解决

问题:本来楼层写好特效是没有任何问题的 ,今天耗费了我一天的时间来找问题郁闷;;;;;不罗嗦了

           楼层点击滚动相应的内容页面 点一次必须刷新一下才能正常滚动 而且延迟

1.首次解决加上刷新页面 window.location.reload()效果不是太好

$("#floatNav .nav ul li").click(function(){
// window.location.reload()
var floorTop=$("#content .floor").eq($(this).index()).offset().top
// console.log(floorTop)
$('html,body').animate({
'scrollTop':floorTop-100+"px"
},280)
// $(this).addClass('active').siblings().removeClass('active')
})
})

2.最终吧body和html互换位置即可了 时间由400改为280;

$(window).scroll(function(){

})

删除直接用script加载即可

3.源码奉上供参考

var winH=$(window).height()
var OScrollTOp=$(window).scrollTop()
if(OScrollTOp>400){
$("#floatNav").fadeIn()
}else if("OScrollTOp<400"){
$("#floatNav").fadeOut()
}

$("#content .floor").each(function(){
if(winH+OScrollTOp-$(this).offset().top>winH/2){
$("#floatNav .nav ul li").removeClass('active')
$("#floatNav .nav ul li").eq($(this).index()).addClass('active')
}
$("#floatNav .nav ul li").click(function(){
// window.location.reload()
var floorTop=$("#content .floor").eq($(this).index()).offset().top
// console.log(floorTop)
$('html,body').animate({
'scrollTop':floorTop-100+"px"
},280)
// $(this).addClass('active').siblings().removeClass('active')
})
})
// })

$(".gotop").click(function() {
$("html,body").animate({
scrollTop: 0
}, 400)
})

    

        

原文地址:https://www.cnblogs.com/wensx/p/12030204.html