title: How to fix a Div to top of page with CSS only
body: <p>I am writing a glossary page. I have the alphabet links on the top of the page. I want to keep the top of the page (including the alphabet links) fixed, whilst the section of the page with the definitions, scrolls up/down as an alphabet is clicked.</p>
  
  <p>My HTML looks a bit like this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;title&gt;My Glossary&lt;/title&gt;&lt;/head&gt;
  &lt;body&gt;
          &lt;div id="top"&gt;
              &lt;a href="#A"&gt;A&lt;/a&gt; |
               &lt;a href="#B"&gt;B&lt;/a&gt; |
              &lt;a href="#Z"&gt;Z&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div id="term-defs"&gt;
             &lt;dl&gt;
                 &lt;span id="A"&gt;&lt;/span&gt;
                 &lt;dt&gt;foo&lt;/dt&gt;
                 &lt;dd&gt;This is the sound made by a fool&lt;/dd&gt;
                 &lt;!-- and so on ... --&gt;
             &lt;/dl&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>[Edit]</strong></p>
  
  <p>The kind of effect I am trying to create is similar to the one <a href="http://www.1stwebdesigner.com/wp-content/uploads/2010/07/index.html" rel="noreferrer">here</a>. The difference being that in the example in the link, the page scrolling is done when a user clicks on a category. In my case, I want to scroll the page when an index (i.e. an alphabet) at the top of the page, is clicked.</p>