首页 前端知识 js点击元素跳转至指定位置

js点击元素跳转至指定位置

2023-05-14 16:05:39 前端知识 前端哥 574 966 我要收藏

js点击页面某处跳转至页面指定元素的位置,这是一种不一样的跳转方法,不是a标签的href属性加元素id

点击对应按钮跳转至对应楼层效果,看演示图:



示例demo:

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title>js点击元素跳转至指定位置——前端哥</title>		<style>			html,body { margin: 0px 0px; padding: 0px 0px;}			.main { width: 100%; height: auto; }			.louceng { width: 100%; height: 100vh; line-height: 100vh; text-align: center; color: #FFFFFF; font-size: 38px; }			.qianduange_1 { background-color: #0BB27A;}			.qianduange_2 { background-color: #0B79B2;}			.qianduange_3 { background-color: #1612EF;}			.qianduange_4 { background-color: #1AEF12;}			.qianduange_5 { background-color: #EB0B25;}			.box { width: 40px; height: 200px; position: fixed; right: 15px; top: 15px;}			.btn { width: 40px; line-height: 40px; text-align: center; font-size: 28px; background-color: #FFFFFF; cursor: pointer; }			.avtive { background-color: #6C680F; color: #FFFFFF;}		</style>		<script src="https://www.qianduange.cn/templets/default/js/jquery.min.js"></script>	</head>	<body>		<div class="main">			<div class="louceng qianduange_1" id="qianduange_1">第一层</div>			<div class="louceng qianduange_2" id="qianduange_2">第二层</div>			<div class="louceng qianduange_3" id="qianduange_3">第三层</div>			<div class="louceng qianduange_4" id="qianduange_4">第四层</div>			<div class="louceng qianduange_5" id="qianduange_5">第五层</div>		</div>		<div class="box">			<div class="btn" data="qianduange_1">1</div>			<div class="btn" data="qianduange_2">2</div>			<div class="btn" data="qianduange_3">3</div>			<div class="btn" data="qianduange_4">4</div>			<div class="btn" data="qianduange_5">5</div>		</div>		<script>			$(function (){				$(".box").find(".btn").unbind("click").click(function (){					var id = $(this).attr("data");					$(".box").find(".btn").removeClass("avtive");					$(this).addClass("avtive");					window.location.hash = "#"  id;				})			})		</script>	</body></html>


转载请注明出处或者链接地址:https://www.qianduange.cn//article/69.html
标签
jsjs跳转
评论
发布的文章

jQuery AJAX请求的统一封装

2024-02-01 12:02:53

jQuery知识学习

2024-02-01 12:02:53

JQuery——动画效果

2024-02-01 12:02:52

jQuery复习

2024-02-01 12:02:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!