1 
<html><body>
<details open><summary>This is the summary</summary>
  <a name="a1"></a>
  <p>Here are all the details.</p>
  </details>
<p>Imagine more than a page of text here.</p>
<p><a href="#a1">This</a> is a link pointing inside the details.</p>
</body></html>

我正在使用 Firefox 浏览器打开我上面的 HTML 代码。当我单击“此”链接时，Firefox 会正确滚动到详细信息页面。

但是，当我单击标题“这是摘要”左侧的三角形时，详细信息（包括带有锚点的行）被关闭（消失），单击链接 Firefox 不再滚动到锚点。

我本来希望 Firefox 至少滚动到隐藏锚点的可见摘要，即使在细节关闭时也是如此，但理想情况下也可以打开细节并准确滚动到锚点。

有没有办法（HTML？css？使用哪个浏览器？其他？）可以滚动到 details-summary 块的关闭（折叠）详细信息中的锚点？

我的问题与扩展详细信息/摘要时滚动到锚点有关？，但如果存在，我更喜欢无 javascript 的解决方案。

要测试您的解决方案，请用实际上不止一页的文本替换“这里的不止一页文本”。

4

2 回答 2

2

问题是锚标记仅在与 非 属性匹配时才会滚动到本地id元素name。您必须有一个与 中的给定 id 匹配的元素a href才能滚动到它。这是固定代码：

<html>
<body>
  <details>
    <summary>This is the summary</summary>
    <a id="a1">Scroll here</a>
    <p>
      Here are all the details. Imagine more than a page of text.
    </p>
  </details>
  <p>
    <a href="#a1">This</a>
    is a link pointing inside the details.
  </p>
</body>
</html>

编辑：另外，它在关闭时不滚动到元素的原因details是因为这些元素实际上没有被渲染。该链接仅滚动到当前正在呈现的元素。您可以通过添加style="padding-bottom: 100vh"到details标签并单击a底部的标签来轻松预览。如果您确实希望它仍然滚动到它，那么您必须添加一些 JS 以在单击details给定a标签时首先打开标签，或者只需将a1id 添加到details标签中。

于 2021-09-04T15:41:52.517 回答
0

解决方案的草案步骤：

var details = [...document.getElementsByTagName("details")];
document.addEventListener('click', function(e) {
  details.forEach( (D,_,A) => D.contains(e.target) ? D.addAttribute('open') : '')
})

e.target但是，应该使用目标锚而不是某种方式。

遍历所有details的优点是，如果锚点位于多个封闭块内，它们都会打开。

于 2021-09-04T22:43:56.517 回答