如何使用 HTML 和 JavaScript 实现页面内位置跳转，而无需使用 `` 标签？

在 html 和 javascript 的帮助下，无需使用 a 标签，也能实现在页面中位置跳转。以下是如何实现：

...

...

在此示例中，

元素将用作导航栏。

...
<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 (data of partDynamicDataTraverse.list) {
    liEle += `<li onclick="test('${data.href}')"><div class="item">${data.name}`;
  }
  partDynamicDataTraverse.$element.append(liEle);
</script>
...

此 JavaScript 代码将使用 jQuery 库向 ;ul 元素添加

元素，这些

元素包含带 onclick 事件处理程序的元素。

...
<div id="d1" class="div"></div>
<div id="d2" class="div"></div>
<div id="d3" class="div"></div>
...

这些

元素代表页面中的不同部分。

当您单击

元素时，onclick 事件处理程序将被触发，执行以下操作：

将 href 属性中的哈希（#）符号移除，获得要滚动到的元素的 ID。
使用 scrollIntoView() 方法将指定的元素滚动到浏览器窗口的可见区域中。

这样，您就可以无需使用标签，就能在页面中进行位置跳转了。

以上就是如何使用 HTML 和 JavaScript 实现页面内位置跳转，而无需使用 `` 标签？的详细内容，更多请关注www.sxiaw.com其它相关文章！