Update Documentation

Author: Anthony Du Pont

docs/examples/anchors.html

@@ -9,17 +9,17 @@
 <h1>URL Anchors</h1>
 <p>The page might contains links using URL anchors which would tell the browser to scroll to a content on the page. Highway manage those URL anchors depending on the URL structure.</p>
 
-<h2 id="anchor">Same Page</h2>
+<h2 id="same-page"><a href="#same-page">Same Page</a></h2>
 <p>The links to the same page with anchors won't trigger transitions. The default browser behavior will be used instead to scroll to the right content on the page.</p>
 <pre>
 <code class="html has-test">&lt;!-- File: index.html --&gt;
 &lt;!-- Link to the same page but with an anchor won't trigger the transition --&gt;
 &lt;a href="#anchor"&gt;&lt;/a&gt;
 </code>
-<a href="#anchor" class="button button--full">Try me</a>
+<a href="#same-page" class="button button--full">Try me</a>
 </pre>
 
-<h2>Other Pages</h2>
+<h2 id="other-pages"><a href="#other-pages">Other Pages</a></h2>
 <p>The links to other pages with anchors are going to be handled by Highway like it should normally do because with or without parameters the URLs are staying different from each other so transitions are required and are triggered by the links.</p>
 <pre>
 <code class="html has-test">&lt;!-- File: index.html --&gt;

docs/examples/disable.html

@@ -9,7 +9,7 @@
 <h1>Disable Highway</h1>
 <p>All links on a page are automatically attached to Highway with <code>Highway.Core</code> to call transitions and create an AJAX navigation. Nevertheless some links have to be ignored or might need to be ignored by Highway for good reasons.</p>
 
-<h2>Cross-Origin</h2>
+<h2 id="cross-origin"><a href="#cross-origin">Cross-Origin</a></h2>
 <p>The links with a URL domain name that is different from the URL domain name of the website are all ignored by Highway for safety and to avoid cross-origin errors that would occur and that would break the navigation process.</p>
 <pre>
 <code class="html has-test">&lt;!-- File: index.html --&gt;
@@ -19,7 +19,7 @@ <h2>Cross-Origin</h2>
 <a href="http://www.google.be" class="button button--full">Try me</a>
 </pre>
 
-<h2>Target</h2>
+<h2 id="target"><a href="#target">Target</a></h2>
 <p>The links with a <code>target</code> attribute are all ignored to keep the default browser behavior related to the value of the attribute. The <code>_blank</code> value will open the page in a new window or a new tab and the <code>_self</code> value will reload the page without transitions.</p>
 <pre>
 <code class="html has-test">&lt;!-- File: index.html --&gt;
@@ -29,7 +29,7 @@ <h2>Target</h2>
 <a href="{{ site.url }}/highway/examples/disable.html" target="_blank" class="button button--full">Try me</a>
 </pre>
 
-<h2>Javascript</h2>
+<h2 id="javascript"><a href="#javascript">Javascript</a></h2>
 <p>The links with Javascript inside the <code>href</code> attribute are all ignored to avoid errors that would break the navigation process. Nevertheless the Javascript inside the attribute is still executed so <strong>be careful</strong> with this kind of use case to avoid malicious code execution.</p>
 <pre>
 <code class="html has-test">&lt;!-- File: index.html --&gt;
@@ -39,7 +39,7 @@ <h2>Javascript</h2>
 <a href="javascript:alert('Hello World');" class="button button--full">Try me</a>
 </pre>
 
-<h2>Router Disabled</h2>
+<h2 id="router-disabled"><a href="#router-disabled">Router Disabled</a></h2>
 <p>The links can be programmatically ignored with the <code>data-router-disabled</code> attribute. This attribute will force the browser to reload the page with transitions.</p>
 <pre>
 <code class="html has-test">&lt;!-- File: index.html --&gt;

docs/examples/parameters.html

@@ -9,7 +9,7 @@
 <h1>URL Parameters</h1>
 <p>The page might contains links using URL parameters which would change the content of a page for example to add additionnal informations, filter some content,... Highway manage those URL parameters depending on the URL structure.</p>
 
-<h2>Same Page</h2>
+<h2 id="same-page"><a href="#same-page">Same Page</a></h2>
 <p>The links to the same page with parameters page will trigger transitions to update the content of the page.<br> This might happen with filters on a page for example with which the page need to be reloaded to filter the content of the page.</p>
 <pre>
 <code class="html has-test">&lt;!-- File: index.html --&gt;
@@ -19,7 +19,7 @@ <h2>Same Page</h2>
 <a href="?parameter=foo" class="button button--full">Try me</a>
 </pre>
 
-<h2>Other Pages</h2>
+<h2 id="other-pages"><a href="#other-pages">Other Pages</a></h2>
 <p>The links to other pages with parameters are going to be handled by Highway like it should normally do because with or without parameters the URLs are staying different from each other so transitions are required and are triggered by the links.</p>
 <pre>
 <code class="html has-test">&lt;!-- File: index.html --&gt;

docs/examples/tracking.html

@@ -9,7 +9,7 @@
 <h1>Tracking</h1>
 <p>It's a good practice to track websites traffic and other datas using tools like <a href="https://analytics.google.com/analytics/web/" target="_blank">Google Analytics</a> or <a href="https://marketingplatform.google.com/about/tag-manager/" target="_blank">Google Tag Manager</a>. Tracking datas help developers understand how users are using their website and learn where there might be some improvements to do to the user-experience.</p>
 
-<h2>Google Analytics</h2>
+<h2 id="google-analytics"><a href="#google-analytics">Google Analytics</a></h2>
 <p><em>Google Analytics</em> is a tool among many others to track datas on websites. One of the most tracked and useful data is the page views on websites to learn where users are going and how many users visited the pages of websites. Unfortunately with Highway and more globally AJAX navigation the page views sent to <em>Google Analytics</em> will always be the same for all pages users will visit because the script in the <code>head</code> tag isn't reloaded on navigation.</p>
 <p>The script being outside of the <code>data-router-wrapper</code> as it should, it isn't updated on navigation and developers need to programmatically send those page views to <em>Google Analytics</em> with Highway <a href="{{ site.url }}/highway/api.html#events">events</a>. The <code>NAVIGATE_END</code> event fits perfectly for this kind of behavior.</p>
 <pre>
@@ -47,10 +47,10 @@ <h2>Google Analytics</h2>
 </code>
 </pre>
 
-<h2>Google Tag Manager</h2>
+<h2 id="google-tag-manager"><a href="#google-tag-manager">Google Tag Manager</a></h2>
 <p>Another tool to track datas on websites is <em>Google Tag Manager</em>. The difference with <em>Google Analytics</em> is that page views don't really need to be sent programmatically since the <em>Google Tag Manager</em> configuration provide the <a href="https://support.google.com/tagmanager/answer/7679322?hl=en" target="_blank">History Change Trigger</a> which can be used to watch all history changes and automatically track new page views.</p>
 <img src="{{ site.url }}/highway/assets/images/tag-manager.jpg" alt="" />
 
-<h2>Other Tools</h2>
+<h2 id="other-tools"><a href="#other-tools">Other Tools</a></h2>
 <p>Developers are free to use any tools needed to track datas from websites. Since those tools might need scripts in the <code>head</code> tag or before the closing <code>body</code> tag those will be outside of the <code>data-router-wrapper</code> of the pages and they won't be updated on navigation.</p>
 <p>The solution with Highway as showcased with <em>Google Analytics</em> is to use <a href="{{ site.url }}/highway/api.html#events">events</a> so developers will be able to send datas to track with Javascript. Refer to the documentation of those tools to send datas programmatically.</p>

docs/examples/transitions.html

@@ -9,7 +9,7 @@
 <h1>Transitions</h1>
 <p>Transitions are one of the key part of Highway and they can be created by extending <code>Highway.Transition</code>.<br> The documentation uses Highway to showcase its capabilities and a simple fade transition to have a nice and smooth transition between pages. Read more of the <a href="{{ site.url }}/highway/get-started.html#transitions">documentation</a> about transitions.</p>
 
-<h2>Default Transition</h2>
+<h2 id="default-transitions"><a href="#default-transitions">Default Transition</a></h2>
 <pre>
 <code>// File: fade.js
 // Import Highway
@@ -71,7 +71,7 @@ <h2>Default Transition</h2>
 <a href="{{ site.url }}/highway/" class="button button--full">Try me</a>
 </pre>
 
-<h2>Contextual Transition</h2>
+<h2 id="contextual-transition"><a href="#contextual-transition">Contextual Transition</a></h2>
 <p>Since the documentation uses Highway it has access to all features available including contextual transitions which are specific transitions attached to links to override the transition related to the page depending on the context the link is. Read more of the <a href="{{ site.url }}/highway/get-started.html#contextual-transitions">documentation</a> about contextual transitions.</p>
 
 <pre>