前端特效——楼层监听和回到顶部

最新推荐文章于 2021-06-03 16:37:10 发布

QQ的猫好懒

最新推荐文章于 2021-06-03 16:37:10 发布

阅读量1.2k

点赞数 1

文章标签：前端楼层监听回到顶部

本文链接：https://blog.csdn.net/cqq1171422470/article/details/79128423

版权

楼层监听和回到顶部 html+js+jquery

1、作者仅仅在IE上测试过，其它内核浏览器可能略有偏差。

2、如果需要使用此插件，仅仅复制就可运行。

3、欢迎用于学习，改进此功能。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>楼层监听+回到顶部</title>
	<script type="text/javascript" src="jquery-2.1.4.js"></script>
</head>
<style>
	.floor1{						
		background-color: #DDDDDD;
		width: 700px;
		height: 800px;
		margin-top: 30px;
		margin-left: 40px;
	}
	.floor2{
		background-color:#FF88C2;
		width: 700px;
		height: 800px;
		margin-top: 30px;
		margin-left: 40px;
	}
	.floor3{
		background-color: #FF8888;
		width: 700px;
		height: 800px;
		margin-top: 30px;
		margin-left: 40px;
	}
	.floor4{
		background-color: #77FFCC;
		width: 700px;
		height: 800px;
		margin-top: 30px;
		margin-left: 40px;
	}
	.floor5{
		background-color: #99BBFF;
		width: 700px;
		height: 800px;
		margin-top: 30px;
		margin-left: 40px;
	}
	h1{										
		text-align: center;
		padding-top: 250px;
	}
	.listen{					  
		position: fixed;
		left: 1000px;
		top: 300px;
	}
	.listen ul{
		padding: 0px;
		margin: 0px;
		background-color: #E93EFF ;
		width: 80px;
		height: auto;
	}
	.listen ul li{
		border-bottom: solid #FF8800  1px;
		text-align: center;
		padding-top: 5px;
		margin: 0px;
		display: block;
		height: 25px;
	}
	.active{						
		background-color: #888888;
	}
	.rtop{							
		position: fixed;
		left: 90%;
		top: 90%;
		width: 15px;
		height: 40px;
		float: left;
		background-color: #BBFF66;
		cursor: pointer;

	}
</style>
<body>
	<div class="floor1 fl" ><h1>第一楼</h1></div>
	<div class="floor2 fl"><h1>第二楼</h1></div>
	<div class="floor3 fl" ><h1>第三楼</h1></div>
	<div class="floor4 fl" ><h1>第四楼</h1></div>
	<div class="floor5 fl" ><h1>第五楼</h1></div>
	<div class="listen">
		<ul>
			<li class="active">1F</li>			
			<li>2F</li>
			<li>3F</li>
			<li>4F</li>
			<li>5F</li>
		</ul>
	</div>
	<div class="rtop">顶部</div>

<script>
	function returnTop(){					//定义回到顶部函数returnTop()
		$('.rtop').hide();				//回到顶部先隐藏
		$('.rtop').click(function(){			//添加点击事件——文档在一秒内回到顶端
			$('body,html').animate({"scrollTop":"0"},1000);
		});
	}
	returnTop();
	$(window).scroll(function(){				//定义触发事件——当滚动条滚动时发生
			var scrolltop;				//定义滚动条滚动的高度
			scrolltop=$(window).scrollTop();	//获取滚动高度
			if(scrolltop>400){			//高度大于400时判断
				$('.rtop').fadeIn();
			}else{
				$('.rtop').hide();
			}
		function listen(){				//定义监听函数
			var floorTop =new Array();		//定义数组
			var listenTop;			  //监听模块的高度
			var floorHeight;			//楼层的高度（可见的固定高度）
			listenTop=$('.listen').offset().top;
			floorHeight=$('.fl').height();
			for(i=0;i<5;i++){			//循环把各楼层文档高度获取
				floorTop[i]=$('.fl').eq(i).offset().top;
				if(listenTop>=floorTop[i]){		//监听模块大于楼层高度时判断
					$('li').eq(i).addClass('active');//添加类
					$('li').eq(i-1).removeClass('active');//删除类
				}else{
					$('li').eq(i).removeClass('active');
				}
			}
		}
		listen();	
	});
</script>
</body>
</html>

实验图如上；

QQ的猫好懒

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端特效——楼层监听和回到顶部

楼层监听和回到顶部 html+js+jquery1、作者仅仅在IE上测试过，其它内核浏览器可能略有偏差。2、如果需要使用此插件，仅仅复制就可运行。3、欢迎用于学习，改进此功能。楼层监听+回到顶部 .floor1{ background-color: #DDDDDD; width: 700px; height:
复制链接

扫一扫