title: HTML 5 - anchors do not work with ios Safari
body: <p>I have a fixed navigation bar which links to areas on the page via anchors - I have used HTML 5 "section" as opposed to a regular "div" but unsure if that makes any difference. When using a desktop with any of the main browsers these anchor links work fine as they do on an android tablet, however when using an ios device they do not respond, I have been searching for an alternative way of doing anchors for ios but to no conclusive fix.</p>
  
  <p>Can anyone point me to a working alternative if there is one or a workaround?</p>
  
  <p>Thanks, John</p>
  
  <p>sample code:</p>
  
  <pre><code>&lt;section id="headbar"&gt;
  
          &lt;section class="container"&gt;
              &lt;a href="#headbar" title="logo"&gt;&lt;img src="images/logo.png" alt="our logo"&gt;&lt;/a&gt;
  
              &lt;ul id="nav"&gt;
              &lt;li&gt;&lt;a href="#tour" title="Learn more" class="current"&gt;Tour&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#faq" title="Frequently asked questions"&gt;FAQs&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#terms" title="Contact us"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;li class="last"&gt;&lt;a href="#terms" title="Read our terms"&gt;Terms&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;&lt;!-- End of #nav --&gt;
          &lt;/section&gt;
  
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container          { width: 960px; margin: auto; }
  #headbar            { background: url(../images/headbarbg.png) repeat-x scroll 0 0 transparent; height: 92px; position: fixed; width: 100%; z-index: 3000; }
  /* Nav */
  ul#nav              { list-style: none; float: right; }
  ul#nav li           { float: left; padding: 0; font-size: 18px; width: auto; margin: 12px 15px 0 15px; }
  ul#nav li a         { display:block; color:#ffffff; text-decoration:none; }
  </code></pre>
  
  <p>and how what they link to is coded:</p>
  
  <pre><code>&lt;section id="tour"&gt;
      &lt;section class="container"&gt;
      &lt;h2&gt;title here&lt;/2&gt;
  &lt;p&gt;lots of text&lt;/p&gt;
      &lt;/section&gt;
  &lt;/section&gt;
  </code></pre>