Click on an element to scroll to a section works odd on iPad
===

<a href="http://bit.ly/POni8k">Please check the page</a>.

The situation is there are two chevron anchors (`<a>`) on the page. (They were added into the DOM via javascript) One is "Previous" and another is "Next". By clicking on the "Next" anchor, the `toNextSection()` function will be triggered and the page will scroll to the next section, and vice versa.

That works on all desktop browsers, but is odd on iPad.

There are several information I have gathered so far about the iPad issue:

 - The first time tapping the "Next" chevron, the page scrolls to the next section correctly. But after that, you can no longer tap either of the chevrons again. Tapping them a second time does nothing.
 - I had tried replacing all contents of the `toPrevSection()` function with a single line: `alert('Test');`, and then tapping the "Previous" chevron can always show the alert box correctly. But as mentioned above, after tapping on the "Next" chevron to scroll the page to the next section, tapping on the "Previous" chevron can no longer show the alert box.
 - I had tried `setInterval('toNextSection()', 10000);` and the page can successfully scroll to the end autometically. That implies the problem seems to be related to tapping.
 - If you manually slide the page a bit forward before tapping on the "Next" chevrons, then tapping on the "Next" chevrons can no longer scroll the page.

<br>
Originally, the two chevrons were bound with the "click" event. I then tried changing to the following in order to fix the iPad issue, but the issue remains. So I guess the problem is not the event type.

    var clickEvent = navigator.platform.match(/iPad/i) ? 'touchstart' : 'click';
    $('#sectionnav .prev a').on(clickEvent, function() { toPrevSection() });
    $('#sectionnav .next a').on(clickEvent, function() { toNextSection() });

<br>
<hr>

Any advise would be greatly appreciated. Thanks!