在 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 元素添加
元素。
... <div id="d1" class="div"></div> <div id="d2" class="div"></div> <div id="d3" class="div"></div> ...
登录后复制
这些
元素代表页面中的不同部分。
元素时，onclick 事件处理程序将被触发，执行以下操作：
当您单击
立即学习“Java免费学习笔记（深入）”；
- 将 href 属性中的哈希（#）符号移除，获得要滚动到的元素的 ID。
- 使用 scrollIntoView() 方法将指定的元素滚动到浏览器窗口的可见区域中。
这样，您就可以无需使用 标签，就能在页面中进行位置跳转了。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
【小浪云服务商 - 服务器12元起 - 挂机宝5元起】
THE END
暂无评论内容