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>

上記の HTML コードを Firefox ブラウザで開いています。「This」リンクをクリックすると、Firefox は詳細ページに正しくスクロールします。

しかし、タイトル「This is the summary」の左にある三角形をクリックして、詳細 (アンカーのある行を含む) が閉じられる (消える) と、リンクをクリックしても Firefox はアンカーまでスクロールしなくなります。

Firefox は、少なくとも詳細が閉じられている場合でもアンカーを非表示にする表示された概要までスクロールすることを期待していましたが、理想的には詳細を開いてアンカーまで正確にスクロールすることも期待していました。

details-summary ブロックの閉じた (折りたたまれた) 詳細でアンカーへのスクロールを可能にする方法 (HTML? css? どのブラウザを使用していますか? その他?) はありますか?

私の質問は、詳細/要約を展開するときにスクロールしてアンカーに関連していますか? 、ただし、JavaScript を使用しないソリューションが存在する場合は、それをお勧めします。

ソリューションをテストするには、「ここに 1 ページ以上のテキスト」を実際の 1 ページ以上のテキストに置き換えてください。

4

2 に答える 2