点击某个标签 跳到指定 ID 内容DIV块

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>触发点击事件跳到指定ID内容块title>
		<style type="text/css">
			.block01,.block02,.block03{
				display: flex;
				justify-content: center;
				align-items: center;
				color: #FFFFFF;
				font-size: 30px;
				font-weight: bold;
			}
			.block01 {
				background-color: #0099FF;
				width: 100%;
				height: 800px;
			}
			.block02 {
				background-color: #fe8725;
				width: 100%;
				height: 800px;
			}
			.block03 {
				background-color: #F06060;
				width: 100%;
				height: 800px;
			}
		style>
	head>
	<body>
		<div class="block01 box-item" data-id="block02" id="block01">
			DIV-01<br>
			点我跳到DIV-02
		div>
		<div class="block02 box-item" data-id="block03" id="block02">
			DIV-02<br>
			点我跳到DIV-03
		div>
		<div class="block03 box-item" data-id="block01" id="block03">
			DIV-03<br>
			点我跳到DIV-01
		div>
	body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript" charset="utf-8">script>
	<script type="text/javascript">
		$(".box-item").click(function(){
			let bomId = $(this).attr("data-id");
			// 滚动到指定位置
			var scrolltop=$("#"+ bomId)[0].scrollHeight;
				$("html").scrollTop($("#"+ bomId).offset().top);
				$("#"+ bomId).scrollTop(scrolltop);
		});
	script>
html>

你可能感兴趣的:(前端,JavaScript,HTML,前端,html,JQuery,javascript)