网页开发中，页面内跳转通常借助<a></a>标签实现。但若需避免使用<a></a>标签，如何实现页面内特定位置跳转呢？本文提供一种无需<a></a>标签的页面内跳转方法。
核心在于：如何不依赖<a></a>标签，点击页面元素后跳转到页面内具有特定ID的元素位置？ 开发者常尝试在元素中添加href属性，但这并不能直接实现页面内跳转。
解决方案：结合JavaScript和scrollIntoView()方法。 不再依赖href属性，而是通过JavaScript事件监听点击事件，获取目标元素的ID，并用scrollIntoView()方法将元素滚动到浏览器窗口的可视区域。
jQuery点击事件遮罩弹出层可移动特效代码
下载
"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
改进后的代码如下：
<!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>Template</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": $("#part .dynamic-data"),
"list": [{
"href": "#d1",
"name": "skip1"
},
{
"href": "#d2",
"name": "skip2"
},
{
"href": "#d3",
"name": "skip3"
}
]
};
function test(href) {
const id = href.replace('#', '');
document.getElementById(id).scrollIntoView();
}
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>
</body>
</html>
这段代码通过onclick事件调用test函数，该函数接收目标元素ID，并使用document.getElementById(id).scrollIntoView()实现页面内跳转。 此方法简洁高效，避免了使用<a></a>标签。 注意代码中使用了jQuery，需确保已引入jQuery库。 如果不需要使用jQuery，可以使用原生JavaScript的querySelector方法来选择元素。
