URLフラグメントが設定されているときに要素がブラウザのビューポートの先頭にくるようにする

Question

私はいくつかのタイトル要素、たとえばh1要素を持つHTMLページを持っています。要素にはidがあるため、URLのフラグメント部分が設定されている場合は、要素がビューポートの上部になるようにページがスクロールされます。

ただし、ページに十分なコンテンツがない場合、テキストは上部に配置されません。

ページの下部にスペースを追加すると、URLのフラグメント部分をターゲットとするIDを持つ要素がビューポートの上部に配置されます。

URLのフラグメント部分を取得するにはJavaScriptを取得する必要があると思います。設定されている場合は、ページの下部に追加するスペースを計算し、ターゲット要素が上部に配置されるようにします。しかし、ブラウザウィンドウのリサイズアクションごとにスペースを再計算する必要があるため、これは独創的な方法です。より良い方法がありますか？

例：

<h1 id="first">first</h1> 
<p>Some text.</p> 

<h1 id="second">second</h1> 
<p>Another text.</p> 

Answer 1

あなたはあなたの最後の要素にIDを設定し、そのよう100VHために、そのvieportを設定できます

.boxes { 
 
    background: gray; 
 
} 
 

 
#first { 
 
    background: #caaaaa; 
 
} 
 

 
#second { 
 
    background: #caaaaa; 
 
} 
 

 
#full-height { 
 
    background: #aaaaca; 
 
    min-height: 100vh; 
 
}

<div class="boxes"> 
 
    <h1 id="first">first</h1> 
 
    <p>Some text.</p> 
 
</div> 
 
<div class="boxes" id="full-height"> 
 
    <h1 id="second">second</h1> 
 
    <p>Another text.</p> 
 
</div>

スニペットを実行して見てください。最後のdivはビューポートの高さを持ちます。したがって、リンク時にテキストは常に上に表示されます。

希望しました。