仿京东楼层滚动效果，点击楼层，如何让楼层不要一个一个的跳，而是直接变到对应的楼层
点击楼层，如何让楼层不要一个一个的跳，而且直接变到对应的楼层 代码如下
<!DOCTYPE html>
<html>
<head>
<title>JD楼层</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<style>
*{padding:0;margin:0;}
.menu-title{border-top:1px solid #ccc;border-right:1px solid #ccc;position:fixed;right:10px;top:10px;background-color:#fff;}
.menu-title li{width:50px;height:50px;line-height:50px;border-left:1px solid #ccc;border-bottom:1px solid #ccc;list-style:none;text-align:center;cursor:pointer;}
.menu-title li.on{background-color:blanchedalmond;}
.floor{background-color:aquamarine;width:100%;height:900px;line-height:400px;margin-top:0;border:1px solid #ccc;}
.menu-cont{overflow:hidden;}
</style>
<body>
<div style="height:100px;"></div>
<div id="zc-scrollFloor">
<ul class="menu-title">
<li class="on">1F</li>
<li>2F</li>
<li>3F</li>
<li>4F</li>
<li>5F</li>
</ul>
<div class="menu-cont">
<div class="floor">
<h4>1F</h4>
</div>
<div class="floor">
<h4>2F</h4>
</div>
<div class="floor">
<h4>3F</h4>
</div>
<div class="floor">
<h4>4F</h4>
</div>
<div class="floor">
<h4>5F</h4>
</div>
</div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
(function($){
/*2017/11/16 SWKJ*/
defaults={
menuTitleClass:'menu-title',
menuContClass:'menu-cont',
menuContChildClass:'floor',
activeClass:'on'
};
$.fn.scrollFloor = function(option){
var settings = $.extend(defaults,option);
$(document).scroll(function() {
var parentHeight = $("."+settings.menuContClass).height(),
parentOffsetTop = $("."+settings.menuContClass)[0].offsetTop,
docScrollTop = $(window).scrollTop(),
childHeight = $("."+settings.menuContChildClass).outerHeight(true);
result = docScrollTop - parentOffsetTop;
n = Math.floor(result/childHeight);
if(result>=0){
setTimeout($("."+settings.menuTitleClass).children().removeClass(settings.activeClass).eq(n).addClass(settings.activeClass),0);
}
});
$("."+settings.menuTitleClass).children().click(function(){
var a = $(this).index();
tarScrollTop = $("."+settings.menuContClass)[0].offsetTop+$("."+settings.menuContChildClass).outerHeight(true)*a;
$("html,body").stop(true).animate({scrollTop:tarScrollTop},500)
});
};
}(jQuery));
$("#zc-scrollFloor").scrollFloor();
</script>
</body>
</html> 如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
楼上两位的答案都可以！我试过！你你根据自己的需要选择用吧！
以前写的。不知道是否满足楼主需求