title: Make named anchor bookmarks appear always at top of the screen when clicked
body: <p>I have my markup as follows:</p>
  
  <pre><code>&lt;li&gt;&lt;a href="#sheds_housing"&gt;Sheds &amp;amp; Housing&lt;/a&gt;&lt;/li&gt;
  &lt;div id="sheds_housing"&gt;
      &lt;h1&gt;sheds &amp;amp; housing&lt;/h1&gt;
      &lt;img src="images/cattle/sheds_housing.png" width="150" height="150" alt="Sheds &amp; Housing"
          title="Sheds &amp; Housing" /&gt;
      &lt;p&gt;Text here&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>to create a link to a section of the page so that when users clicks the anchor, it takes him to that section.</p>
  
  <p>Is there anyway I can make sure that when a user does so, the content always shows at the top without any extra content that maybe present in the normal flow of the document above the linked div.</p>
  
  <p>Can it be done with CSS alone or do I have to use JS/jQuery for this, and if yes what code?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I was not clear before; See this <a href="http://jsfiddle.net/dKfVL/" rel="noreferrer">Fiddle</a>. If you click the first two links, you will be taken to the respective sections and the content will appear at the top of the window but if you click the last link, you will be taken to the respective section but the content will not appear at the top of the window and the content that sits above the respective sections is present.</p>