title: How to handle anchor hash linking in AngularJS
body: <p>Do any of you know how to nicely handle anchor hash linking in <strong>AngularJS</strong>?</p>
  
  <p>I have the following markup for a simple FAQ-page</p>
  
  <pre><code>&lt;a href="#faq-1"&gt;Question 1&lt;/a&gt;
  &lt;a href="#faq-2"&gt;Question 2&lt;/a&gt;
  &lt;a href="#faq-3"&gt;Question 3&lt;/a&gt;
  
  &lt;h3 id="faq-1"&gt;Question 1&lt;/h3&gt;
  &lt;h3 id="faq-2"&gt;Question 2&lt;/h3&gt;
  &lt;h3 id="fa1-3"&gt;Question 3&lt;/h3&gt;
  </code></pre>
  
  <p>When clicking on any of the above links AngularJS intercepts and routes me to a completely different page (in my case, a 404-page as there are no routes matching the links.)</p>
  
  <p>My first thought was to create a route matching "<strong>/faq/:chapter</strong>" and in the corresponding controller check <code>$routeParams.chapter</code> after a matching element and then use jQuery to scroll down to it.</p>
  
  <p>But then AngularJS shits on me again and just scrolls to the top of the page anyway.</p>
  
  <p>So, anyone here done anything similar in the past and knows a good solution to it?</p>
  
  <p>Edit: Switching to html5Mode should solve my problems but we kinda have to support IE8+ anyway so I fear it's not an accepted solution :/</p>