根据hash值 滑动到指定位置以及楼层效果

根据hash值 滑动到指定位置
eg:

<a href="#page2">page2</a> 
<div  id="page1">page1</div> 


nav.find("a[href^='#']").click(function(e){ 
    e.preventDefault(); 
    $('html, body').animate({scrollTop: $(this.hash).offset().top}, 400); 
}); 

楼层效果
html

	<!--banner部分-->
	<div class="banner_one banner" id="floor1">我是楼层1</div>
	<div class="banner_two banner" id="floor2">我是楼层2</div>
	<div class="banner_three banner" id="floor3">我是楼层3</div>
	<div class="banner_four banner" id="floor4">我是楼层4</div>
	<div class="banner_five banner" id="floor5">我是楼层5</div>
	<div class="banner_six banner" id="floor6">我是楼层6</div>
	<div class="footer">我是底部</div>
	<!--楼层部分-->
	<div class="floor">
		<ul>
			<li><a href="#floor1">1</a></li>
			<li><a href="#floor2">2</a></li>
			<li><a href="#floor3">3</a></li>
			<li><a href="#floor4">4</a></li>
			<li><a href="#floor5">5</a></li>
			<li><a href="#floor6">6</a></li>
		</ul>
	</div>

js

//			第一种点击li元素到相应的楼层的方法,可以直接用锚点的方式,然后加上点击后的效果			
//			$(".floor li").click(function(){
//				$(this).addClass("active").siblings().removeClass("active")
//			})
			
//			第二种点击li元素到相应的楼层的方法,锚点要去掉
			var flag = true //设置标识。防止出现跑马灯
			$(".floor li").click(function(){
				flag = false
				$(this).addClass("active").siblings().removeClass("active")
				var index = $(this).index()//获取当前点击元素的索引
				var top = $(".banner").eq(index).offset().top;//获取每个banner到顶部的距离
				$("html,body").stop(true).animate({"scrollTop":top},function(){flag = true})
			})
			
//			滚轮滑动切换楼层
			$(window).scroll(function(){
				if(flag){
				//浏览器可视窗口的一半,也可以根据自己需求设定
					var winH = $(window).innerHeight()/2;
					var scrollT = $(window).scrollTop()
					var len = $(".banner").size()
					for(var i=0;i<len;i++){
						//注意这里banner对象加了i之后变成了js对象,所以用offsetTop
						var bannerGap = $(".banner")[i].offsetTop - scrollT
						if(bannerGap < winH){
							$(".floor li").eq(i).addClass("active").siblings().removeClass("active")
						}
					}
				}
			})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章