如何在href中使用data-attr而不是id？

Question

假设我在body元素中有这个html：

<a href="#fragment-1">Go to href</a>

我需要那个锚点把我带到同一页面中的另一个元素：

<div id="fragment-1">Some content</div>

我正在使用id进行此操作，但我想使用数据属性。

喜欢这个锚：<a href="data-attr">Go to href</a>

接听此div：<div data-attr="fragment-1">Some content</div>

我怎样才能做到这一点？

Answer 1

你做不到。由于数据属性

• 是用户定义的，
• 没有内置的唯一性语义，

为了锚点，它们不能像ID一样。

您可以使用JavaScript将页面滚动到与document.querySelector('[data-attr="your-fragment"]')匹配的任何元素，但这是JavaScript领域。您不会在HTML中免费获得此行为。