title: Go to top of page
body: <p>I created an icon at the side of my page that can be clicked to go back to the top of the page.</p>
  
  <p>I thought this would be fairly simple, like so:</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-css lang-css prettyprint-override"><code>#back_to_top{
   position:fixed;
   right:0px;
   bottom:80px;
   padding:10px;
   background-color:#fff;
   opacity:0.5;
   border-radius:10px 0px 0px 10px;
   cursor:pointer;
  }
  #back_to_top img{
   width:50px;
   height:50px;
  }
  #content{
    height:9999px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a id="top_of_page"&gt;&lt;/a&gt;
  
  &lt;div id="content"&gt;loads of content&lt;/div&gt;
  
  &lt;div id="back_to_top"&gt;
   &lt;a href="#top_of_page"&gt;
   &lt;img src="media/top.png"&gt;
   &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, when I click the icon it actually moves down the page by the same amount of pixels each time. </p>
  
  <ul>
  <li>I have no other anchors or anything else with a similar ID.</li>
  <li>My anchor tag is the first tag in my body.</li>
  <li>my 'loads of content' is all generated dynamically from php.</li>
  </ul>
  
  <p>I know its working in the snippet but I can't share a full example, however, any ideas why this might act this way, would be really appreciated.</p>