当前位置：首页 > 文章列表 > 文章 > 前端 > 如何使用 HTML 和 JavaScript 实现页面内位置跳转，而无需使用 `` 标签？

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

2024-11-09 18:03:59 0浏览收藏

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《如何使用 HTML 和 JavaScript 实现页面内位置跳转，而无需使用 `` 标签？》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

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

...
<ul class="dynamic-data sticky-top d-flex gap-5 py-3 fs-3 bg-white"></ul>
...

在此示例中，

...
<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}</div></li>`;
  }
  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 实现页面内位置跳转，而无需使用 `` 标签？》文章吧，也可关注golang学习网公众号了解相关技术文章。