title: Force element to be at top of browser viewport when URL fragment is set
body: <p>I have a HTML page with several title elements, say <code>h1</code> elements. The elements have an id, so if the fragment part of the URL is set, the page is scrolled such that the element is at the top of the viewport.</p>
  
  <p>However, when the page does not have enough content, then the text will not be positioned at the top.</p>
  
  <p>How can I add space to the bottom of the page, so the element with the id targeted by the fragment part of the URL will be at the top of the viewport?</p>
  
  <p>I think I need to get JavaScript to get the fragment part of the URL, and if it's set, then calculate the space to be added to the bottom of the page so the targeted element is positioned at the top. However, that seems to be a devious method, because for each browser window resize action, the space must be recalculated. Is there a better way?</p>
  
  <p><strong>Example:</strong></p>
  
  <pre><code>&lt;h1 id="first"&gt;first&lt;/h1&gt;
  &lt;p&gt;Some text.&lt;/p&gt;
  
  &lt;h1 id="second"&gt;second&lt;/h1&gt;
  &lt;p&gt;Another text.&lt;/p&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/05hYo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/05hYo.png" alt="Viewport"></a></p>