本教程演示如何在不使用<a></a>标签的情况下，实现网页内的跳转。传统方法通常使用<a></a>标签的href属性，但本方法利用javascript和元素id，实现同样的效果。
本例构建一个包含多个可点击元素的页面，点击后跳转到页面中对应ID的元素位置。 我们将用JavaScript替代<a></a>标签的功能。
核心思路：JavaScript监听点击事件，获取点击元素对应的跳转目标ID，使用document.getElementById()方法获取目标元素，最后调用scrollIntoView()方法将目标元素滚动到浏览器窗口的可视区域。
改进后的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>页面内跳转</title>
<link rel="stylesheet" href="https://www.php.cn/link/643d54cbb5e50cf4a6e978af475a98a2">
<link rel="stylesheet" href="version/0.0.2/css/ng-box.css">
<style>
:root {
--ng-red: red;
--ng-blue: blue;
--ng-green: green;
}
.div {
height: 50vh;
}
.item {
cursor: pointer;
}
#d1 {
background-color: var(--ng-red);
}
#d2 {
background-color: var(--ng-blue);
}
#d3 {
background-color: var(--ng-green);
}
ul > li {
display: inline-block;
cursor: pointer;
margin-left: 20px;
}
</style>
</head>
<body>
<nav id="common-nav"></nav>
<main>
<div class="box-container">
<ul class="dynamic-data sticky-top d-flex gap-5 py-3 fs-3 bg-white"></ul>
<div class="div" id="d1">部分一</div>
<div class="div" id="d2">部分二</div>
<div class="div" id="d3">部分三</div>
</div>
</main>
<script>
const partDynamicDataTraverse = {
"$element": $(".dynamic-data"),
"list": [{
"href": "#d1",
"name": "跳转到部分一"
},
{
"href": "#d2",
"name": "跳转到部分二"
},
{
"href": "#d3",
"name": "跳转到部分三"
}
]
};
function test(href) {
const id = href.replace('#', '');
document.getElementById(id).scrollIntoView({behavior: 'smooth'}); // 添加平滑滚动
}
let liEle = '';
for (const data of partDynamicDataTraverse.list) {
liEle += `<li onclick="test('${data.href}')"><div class="item">${data.name}</div></li>`;
}
partDynamicDataTraverse.$element.append(liEle);
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </body>
</html>
这段代码通过onclick事件和test()函数实现了无<a></a>标签的页面内跳转。test()函数获取目标ID并调用scrollIntoView()方法（并添加了{behavior: 'smooth'}参数实现平滑滚动）完成跳转。 请确保目标元素拥有唯一的ID。 代码中引入了jQuery库，请确保已引入该库或使用原生JavaScript进行选择器操作。
