0;
scrollTop(value + diff);
if(diff) {
itv = setTimeout(callee, 16);
}
})();
};
function scrollTop(v) {
if(v == null) {
return Math.max(body.scrollTop, html.scrollTop);
} else {
body.scrollTop = html.scrollTop = v;
}
}
})
//点击楼层按钮跳到相应的楼层
var isMove=false;
//点击右侧导航条
$(".louti li").on("click",function(){
isMove=true;
//按钮变化
$(this).removeClass().addClass("active").siblings("li").removeClass("active");
//楼梯移动
var index=$(this).index();
var _topp=$(".staircase").eq(index).offset().top;
$("html,body").stop().animate({scrollTop:_topp},200,function(){
isMove=false;
})
})
//楼梯滚动导航条相对移动
$(window).scroll(function(){
//判断是否在滚动，如果没有，则支执行这里的代码
if(!isMove){
//获取滚动距离
var _scrollTop=$(document).scrollTop();
//遍历所有楼梯
$(".staircase").each(function(){
var _topp=$(this).offset().top;
//判断滚动距离是否大于楼梯的top值
if(_scrollTop>=_topp){
var index=$(this).index();
$(".louti li").eq(index).removeClass().addClass("active")
.siblings("li").removeClass("active");
}
})
}
})
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程！
相关推荐：
php公益培训视频教程
JavaScript图文教程
JavaScript在线手册
以上就是js实现全屏楼梯滚动效果（代码实现）的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词：js完成全屏楼梯滚动效果（代码完成）