title: how to make anchor tags scroll without being covered by position: fixed area
body: <p>I have a page with a header at the top with position:fixed, so that it stays at the top of the screen as the user scrolls. That works fine.</p>
  
  <p>In the body underneath there are anchor tags. And when you click on a link that takes you to one of these anchors, the browser displays the page with that that anchor at the very top. Even though this is under the header.</p>
  
  <p>Here's a simplified page that demonstrates the problem:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;style&gt;
    .header {
      height: 20px;
      position: fixed;
      top: 0px;
      background-color: gray;
    }
    
    .body {
      overflow: auto;
      margin-top: 20px;
    }
  &lt;/style&gt;
  &lt;div class="header"&gt;
    This is the header.
  &lt;/div&gt;
  &lt;div class="body"&gt;
    &lt;p&gt;&lt;a href="#10"&gt;Line 10&lt;/a&gt; &lt;a href="#20"&gt;Line 20&lt;/a&gt;&lt;/p&gt;
    This is the body.&lt;br/&gt; Line 2&lt;br/&gt; Line 3&lt;br/&gt; Line 4&lt;br/&gt; Line 5&lt;br/&gt; Line 6&lt;br/&gt; Line 7&lt;br/&gt; Line 8&lt;br/&gt; Line 9&lt;br/&gt;
    &lt;a name="10" /&gt; Line 10&lt;br/&gt; Line 11&lt;br/&gt; Line 12&lt;br/&gt; Line 13&lt;br/&gt; Line 14&lt;br/&gt; Line 15&lt;br/&gt; Line 16&lt;br/&gt; Line 17&lt;br/&gt; Line 18&lt;br/&gt; Line 19&lt;br/&gt;
    &lt;a name="20" /&gt; Line 20&lt;br/&gt; Line 21&lt;br/&gt; Line 22&lt;br/&gt; Line 23&lt;br/&gt; Line 24&lt;br/&gt; Line 25&lt;br/&gt; Line 26&lt;br/&gt; Line 27&lt;br/&gt; Line 28&lt;br/&gt; Line 29&lt;br/&gt; Line 30&lt;br/&gt; Line 31&lt;br/&gt; Line 32&lt;br/&gt; Line 33&lt;br/&gt; Line 34&lt;br/&gt; Line 35&lt;br/&gt; Line 36&lt;br/&gt; Line 37&lt;br/&gt;  Line 38&lt;br/&gt; Line 39&lt;br/&gt; Line 40&lt;br/&gt;
  &lt;/div&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Click on the "Line 10" link and it displays with the header, and right below the header, the first thing visible is ... line 11.</p>
  
  <p>I'd like it to work so that if you click on a link for line 10, that line 10 will be visible.</p>