HTML 封闭细节总结 - 如何滚动到锚点里面答案

【问题标题】：HTML closed details summary - how to scroll to anchor insideHTML 封闭细节总结 - 如何滚动到锚点里面
【发布时间】：2021-09-04 15:26:01
【问题描述】：

<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 块的关闭（折叠）详细信息中的锚点？

我的问题与Scroll to anchor when expanding details/summary? 有关，但如果存在，我更喜欢无 javascript 的解决方案。

要测试您的解决方案，请将“此处的文字不止一页”替换为实际的多页文字。

【问题讨论】：

标签： javascript html css anchor details-tag

【解决方案1】：

问题在于，如果锚标记匹配id，而不是name，则锚标记只会滚动到本地元素。您必须有一个与 a href 中的给定 id 匹配的元素才能滚动到它。这是固定的代码：

<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 以在单击给定的a 标记时首先打开details 标记，或者只需将a1 id 添加到details 标记。

【讨论】：

很抱歉，您的解决方案对我不起作用。我已经更新了我的问题，建议在哪里包含一页以上的文本以用于测试目的。请您以这种方式测试您的解决方案吗？如果它有效，您使用什么浏览器和版本？谢谢
@bgukw 我已按答案编辑。最后一句话可能对你有帮助。
谢谢，您写道“如果您确实希望它仍然滚动到它，那么您必须添加一些 JS”。没有如果，滚动那里是我想要的，滚动是并且仍然是我的问题。您能就您所指的JS提供建议吗？非常感谢
@bgukw 就个人而言，我认为目前不滚动到从活动 DOM 中删除的元素是预期的行为。如果你想滚动到某个东西，那么你必须确保它可以实际滚动到。您可以通过 JS 在a 标记上添加click 事件，然后将open 属性添加到details 标记。
我尊重你的意见，我的期望是不合理的，我仍然希望在封闭的细节中启用滚动到锚点。非常感谢您概述了一个 javascript 解决方案，但我对 JS 的了解不够。如果您可以使用您概述的 JS 来增强我上面的 HTML，我会接受它作为我的问题的解决方案。

【解决方案2】：

解决方案的草案步骤：

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

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

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

【讨论】：