jQuery 楼层实现步骤以及原理

实现简单楼层效果 ，步骤都在jQuery代码里面

 布局

<ul class="btnList">
	<li>1F<span>一楼</span></li>
	<li>2F<span>二楼</span></li>
	<li>3F<span>三楼</span></li>
	<li>4F<span>四楼</span></li>
	<li>5F<span>五楼</span></li>
	<li>6F<span>六楼</span></li>
	<li>7F<span>七楼</span></li>
	<li>8F<span>八楼</span></li>
	<li>9F<span>九楼</span></li>
	<li class="goTop">TOP</li>	
</ul>
<ul class="floorList">
	<li>一楼</li>
	<li>二楼</li>
	<li>三楼</li>
	<li>四楼</li>
	<li>五楼</li>
	<li>六楼</li>
	<li>七楼</li>
	<li>八楼</li>
	<li>九楼</li>
</ul>

jQuery代码

<script type="text/javascript">
	$(function(){
		//初始化
		var sH=$(window).scrollTop();
		//循环右侧楼层
		$(".floorList li").each(function(index){
			//获取当前元素距离文档顶部的高
			var top = $(this).offset().top;
			//获取当前显示元素的高的一半
			var tH = $(this).outerHeight()/2;
			//满足条件  item距离文档的高 减去 item的高的一半 小于 滚动条的高 并且  item距离文档的高 加上 item的高的一半
			if(top-tH<=sH&&sH<=top+tH){
				//满足条件之后改变左侧样式
				$(".btnList li").eq(index).find("span").addClass("active").end().siblings().find("span").removeClass("active");
			}
		})
		//声明一个标记记录是否在运动过程中（没有运动是false,运动中是true）,解决相隔几个楼层点击的时候出现中间一层一层加样式的bug
		var flag=false;
		//除了右侧按钮的最后一个点击
		$(".btnList li").not(":last").click(function(){
			//运动中
			flag=true;
			//保存当前点击元素的下标
			var index = $(this).index();
			//获取当前点击元素距离文档的高
			var scrollT = $(".floorList li").eq(index).offset().top;
			//改变html，body的高度
			$("html,body").stop().animate({"scrollTop":scrollT},1000,function(){
				//运动完
				flag=false;
			});
			//改变当前点击元素下面的span标签的样式
			$(this).find("span").addClass("active").end().siblings().find("span").removeClass("active");
		})
		//回到顶部
		$(".goTop").click(function(){
			//运动中
			flag=true;
			$("html,body").stop().animate({"scrollTop":0},1000,function(){
				//运动完
				flag=false;
				//回到顶部之后改变下标为零的楼层样式
				$(".btnList li").eq(0).find("span").addClass("active").end().siblings().find("span").removeClass("active");
			});
			
			
		})
		//文档滚动事件
		$(window).scroll(function(){
			//判断flag!=true
			if(!flag){
				//获取滚动高
				var  sH = $(window).scrollTop();
				//循环右侧楼层
				$(".floorList li").each(function(index,item){
					//获取当前元素距离文档顶部的高
					var top = $(item).offset().top;
					//获取当前显示元素的高的一半
					var tH = $(item).outerHeight()/2;
					//满足条件  item距离文档的高 减去 item的高的一半 小于 滚动条的高 并且  item距离文档的高 加上 item的高的一半
					if(top-tH<=sH&&sH<=top+tH){
						//满足条件之后改变左侧样式
						$(".btnList li").eq(index).find("span").addClass("active").end().siblings().find("span").removeClass("active");
					}
				})
			}
			
		})
	})
</script>

经验不足，还请前辈大神们多多指教，以后会越来越改进