From 528c346dc82773afe39c467ceda56fcdb92dd811 Mon Sep 17 00:00:00 2001
From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com>
Date: Wed, 14 Nov 2018 23:49:43 +0100
Subject: [PATCH 01/10] style: rename arguments & comments to prevent line
 wrapping

---
 index.js | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/index.js b/index.js
index 3fed828..f3a111f 100755
--- a/index.js
+++ b/index.js
@@ -19,19 +19,16 @@
 
   /**
    * Check if an element is an anchor pointing to a target on the current page
-   * @param {HTMLElement} element
+   * @param {HTMLElement} el
    */
-  function isAnchorToLocalElement(element) {
-    var localHostname = location.hostname;
-    var localPathname = location.pathname;
-
+  function isAnchorToLocalElement(el) {
     return (
       // Is an anchor
-      element.tagName && element.tagName.toLowerCase() === 'a' &&
+      el.tagName && el.tagName.toLowerCase() === 'a' &&
       // Targets an element
-      element.href.indexOf('#') > 0 &&
+      el.href.indexOf('#') > -1 &&
       // Target is on current page
-      element.hostname === localHostname && element.pathname === localPathname
+      el.hostname === location.hostname && el.pathname === location.pathname
     );
   }
 
@@ -48,7 +45,9 @@
   }
 
   /**
-   * Check if the clicked target is an anchor pointing to a local element, if so prevent the default behavior and handle the scrolling using the native JavaScript scroll APIs so smoothscroll-Polyfills apply
+   * Check if the clicked target is an anchor pointing to a local element,
+   * if so prevent the default behavior and handle the scrolling using the
+   * native JavaScript scroll APIs so smoothscroll polyfills apply
    * @param {event} evt
    */
   function handleClick(evt) {

From 36d1ed504e25f7964c1b99f3ec5671ddfcfebc11 Mon Sep 17 00:00:00 2001
From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com>
Date: Wed, 14 Nov 2018 23:55:28 +0100
Subject: [PATCH 02/10] feat: focus elements upon navigation

fix #4 elements with IDs are focused upon navigation,
body is focused when scrolling to top
---
 index.js     | 24 ++++++++++++++++++++++--
 package.json |  2 +-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/index.js b/index.js
index f3a111f..9f9e90f 100755
--- a/index.js
+++ b/index.js
@@ -32,6 +32,21 @@
     );
   }
 
+  /**
+   * Focuses an element, if it's not focused after the first try,
+   * allow focusing by adjusting tabIndex and retry
+   * @param {HTMLElement} el
+   */
+  function focusElement(el) {
+    el.focus();
+    if (document.activeElement !== el) {
+      el.setAttribute('tabIndex', '-1');
+      // TODO: Only remove outline if it comes from the UA, not the user CSS
+      el.style.outline = 'none';
+      el.focus();
+    }
+  }
+
   /**
    * Walks up the DOM starting from a given element until an element satisfies the validate function
    * @param {HTMLElement} element The element from where to start validating
@@ -64,8 +79,13 @@
     if (isScrollTop || target) {
       evt.preventDefault();
 
-      if (isScrollTop) window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
-      else target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      if (isScrollTop) {
+        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+        focusElement(document.body);
+      } else {
+        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        focusElement(target);
+      }
     }
 
   }
diff --git a/package.json b/package.json
index 2bacdf3..cfe45f4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "smoothscroll-anchor-polyfill",
-  "version": "0.9.4",
+  "version": "0.10.4",
   "description": "Apply smooth scroll to anchor links to replicate CSS scroll-behavior",
   "main": "dist/index.js",
   "browserslist": [

From 5c6fd3bce8b2b15c4258542abc810fb4315c237b Mon Sep 17 00:00:00 2001
From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com>
Date: Thu, 15 Nov 2018 00:02:07 +0100
Subject: [PATCH 03/10] fix: keep native behavior for shift-click and other
 meta keys

---
 index.js     | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/index.js b/index.js
index 9f9e90f..3b3fe0a 100755
--- a/index.js
+++ b/index.js
@@ -66,6 +66,9 @@
    * @param {event} evt
    */
   function handleClick(evt) {
+    // Abort if shift/ctrl-click or not primary click (button !== 0)
+    if (evt.metaKey || evt.ctrlKey || evt.shiftKey || evt.button !== 0) return;
+
     var clickTarget = getEventTarget(evt);
     var anchor = findInParents(clickTarget, isAnchorToLocalElement);
     if (!anchor) return;
diff --git a/package.json b/package.json
index cfe45f4..7f8981d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "smoothscroll-anchor-polyfill",
-  "version": "0.10.4",
+  "version": "0.10.5",
   "description": "Apply smooth scroll to anchor links to replicate CSS scroll-behavior",
   "main": "dist/index.js",
   "browserslist": [

From 66715479a5a4ddc0a369b255bd5158b12cde0eb7 Mon Sep 17 00:00:00 2001
From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com>
Date: Thu, 15 Nov 2018 02:14:49 +0100
Subject: [PATCH 04/10] fix: prevent flickers during smoothscroll

Use preventScroll where supported, otherwise focus() after a timeout
so its auto scrolling doesn't interrupt the smooth scroll
---
 index.js     | 36 ++++++++++++++++++++++++++++++++----
 package.json |  2 +-
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/index.js b/index.js
index 3b3fe0a..f1ef392 100755
--- a/index.js
+++ b/index.js
@@ -8,6 +8,20 @@
     return;
   }
 
+  // Check if browser supports focus without automatic scrolling (preventScroll)
+  var supportsPreventScroll = false;
+  try {
+    var el = document.createElement('a');
+    // Define getter for preventScroll to find out if the browser accesses it
+    var preppedFocusOption = Object.defineProperty({}, 'preventScroll', {
+      get: function () {
+        supportsPreventScroll = true;
+      }
+    });
+    // Trigger focus – if browser uses preventScroll the var will be set to true
+    el.focus(preppedFocusOption);
+  } catch (e) { }
+
   /**
    * Get the target element of an event
    * @param {event} evt
@@ -38,12 +52,12 @@
    * @param {HTMLElement} el
    */
   function focusElement(el) {
-    el.focus();
+    el.focus({ preventScroll: true });
     if (document.activeElement !== el) {
       el.setAttribute('tabIndex', '-1');
       // TODO: Only remove outline if it comes from the UA, not the user CSS
       el.style.outline = 'none';
-      el.focus();
+      el.focus({ preventScroll: true });
     }
   }
 
@@ -59,6 +73,9 @@
     return false;
   }
 
+  // Stores the setTimeout id of pending focus changes, allows aborting them
+  var pendingFocusChange;
+
   /**
    * Check if the clicked target is an anchor pointing to a local element,
    * if so prevent the default behavior and handle the scrolling using the
@@ -70,6 +87,7 @@
     if (evt.metaKey || evt.ctrlKey || evt.shiftKey || evt.button !== 0) return;
 
     var clickTarget = getEventTarget(evt);
+    // Check the DOM from the click target upwards if a local anchor was clicked
     var anchor = findInParents(clickTarget, isAnchorToLocalElement);
     if (!anchor) return;
 
@@ -80,15 +98,25 @@
     var target = !isScrollTop && document.getElementById(targetId);
 
     if (isScrollTop || target) {
+      // Prevent default browser behavior to avoid a jump to the anchor target
       evt.preventDefault();
+      // Clear potential pending focus change triggered by a previous scroll
+      if (!supportsPreventScroll) window.clearTimeout(pendingFocusChange);
 
       if (isScrollTop) {
         window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
-        focusElement(document.body);
       } else {
         target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        focusElement(target);
       }
+
+      // If the browser supports preventScroll: immediately focus the target
+      // Otherwise schedule the focus so the smoothscroll isn't interrupted
+      if (supportsPreventScroll) focusElement(isScrollTop ? document.body : target);
+      else pendingFocusChange = setTimeout(
+        focusElement,
+        450,
+        isScrollTop ? document.body : target
+      );
     }
 
   }
diff --git a/package.json b/package.json
index 7f8981d..2fd526b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "smoothscroll-anchor-polyfill",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "description": "Apply smooth scroll to anchor links to replicate CSS scroll-behavior",
   "main": "dist/index.js",
   "browserslist": [

From caed04970bbb27dfebffdb25b8825e36a9731910 Mon Sep 17 00:00:00 2001
From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com>
Date: Thu, 15 Nov 2018 02:16:12 +0100
Subject: [PATCH 05/10] feat: support HTML5 special fragment "#top"

---
 index.js     | 32 +++++++++++++++-----------------
 package.json |  2 +-
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/index.js b/index.js
index f1ef392..44163f9 100755
--- a/index.js
+++ b/index.js
@@ -91,32 +91,30 @@
     var anchor = findInParents(clickTarget, isAnchorToLocalElement);
     if (!anchor) return;
 
-    // If href ends with '#', no id: just scroll to the top
-    var isScrollTop = anchor.href.match(/#$/);
-    // Try to retrieve the targeted element
-    var targetId = !isScrollTop && anchor.hash.slice(1);
-    var target = !isScrollTop && document.getElementById(targetId);
+    var hash = anchor.hash;
 
-    if (isScrollTop || target) {
+    // Retrieve target if an id is specified in the hash, otherwise use body.
+    // If hash is "#top" and no target with id "top" was found, also use body
+    // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href
+    var target = hash ? document.getElementById(hash.slice(1)) : document.body;
+    if (hash === '#top' && !target) target = document.body;
+
+    if (target) {
       // Prevent default browser behavior to avoid a jump to the anchor target
       evt.preventDefault();
       // Clear potential pending focus change triggered by a previous scroll
       if (!supportsPreventScroll) window.clearTimeout(pendingFocusChange);
 
-      if (isScrollTop) {
-        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
-      } else {
-        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      }
+      // Use scroll APIs to scroll to top (if target is body) or to the element
+      // This allows polyfills for these APIs to do their smooth scrolling magic
+      var scrollTop = target === document.body;
+      if (scrollTop) window.scroll({ top: 0, left: 0, behavior: 'smooth' });
+      else target.scrollIntoView({ behavior: 'smooth', block: 'start' });
 
       // If the browser supports preventScroll: immediately focus the target
       // Otherwise schedule the focus so the smoothscroll isn't interrupted
-      if (supportsPreventScroll) focusElement(isScrollTop ? document.body : target);
-      else pendingFocusChange = setTimeout(
-        focusElement,
-        450,
-        isScrollTop ? document.body : target
-      );
+      if (supportsPreventScroll) focusElement(target);
+      else pendingFocusChange = setTimeout(focusElement, 450, target);
     }
 
   }
diff --git a/package.json b/package.json
index 2fd526b..ceae6f6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "smoothscroll-anchor-polyfill",
-  "version": "0.10.6",
+  "version": "0.11.0",
   "description": "Apply smooth scroll to anchor links to replicate CSS scroll-behavior",
   "main": "dist/index.js",
   "browserslist": [

From b909ca18343e94a80882cb28b6a4f5d2a58ab4b9 Mon Sep 17 00:00:00 2001
From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com>
Date: Thu, 15 Nov 2018 04:20:53 +0100
Subject: [PATCH 06/10] style: update HTML formatting

---
 index.html | 54 +++++++++++-------------------------------------------
 1 file changed, 11 insertions(+), 43 deletions(-)

diff --git a/index.html b/index.html
index e45023e..74652fe 100755
--- a/index.html
+++ b/index.html
@@ -16,8 +16,8 @@
     <link rel="stylesheet" href="https://unpkg.com/milligram@1.3.0/dist/milligram.css">
     <link rel="stylesheet" href="./index.css">
 
-    <!-- Hide header after scroll (mobile only) -->
     <script>
+      // Hide header after scroll (mobile only)
       document.addEventListener('DOMContentLoaded', function () {
         var d = document, bd = d.body, bdClass = bd.classList;
         var prevScrollPos = d.documentElement.scrollTop || bd.scrollTop;
@@ -48,7 +48,7 @@
           <li><a class="button" href="#docs">Docs</a></li>
           <li><a class="button" href="#legal">Legal</a></li>
           <li></li>
-          <li><a href="#">⬆ to Top</a></li>
+          <li><a href="#top">⬆ to Top</a></li>
         </ul>
       </nav>
     </header>
@@ -203,25 +203,7 @@ <h3 id="ssr">Will this break Server Side Rendering?</h3>
         <p>No.</p>
       </section>
       <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
       <!-- Way too big legal section  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
       <section id="legal">
         <label class="label-inline" for="language">Show in German? (<b>Deutsch</b>)</label>
         <input type="checkbox" name="language" id="language">
@@ -330,27 +312,13 @@ <h3>Datenschutz</h3>
             Daten
             unmittelbar auf Ihre Person bezogen werden:</p>
           <ul>
-            <li>
-              Besuchte Website
-            </li>
-            <li>
-              Uhrzeit zum Zeitpunkt des Zugriffes
-            </li>
-            <li>
-              Menge der gesendeten Daten in Bytes
-            </li>
-            <li>
-              Quelle/Verweis, von welchem Sie auf diese Seite gelangten
-            </li>
-            <li>
-              Verwendeter Browser
-            </li>
-            <li>
-              Verwendetes Betriebssystem
-            </li>
-            <li>
-              Verwendete IP-Adresse
-            </li>
+            <li>Besuchte Website</li>
+            <li>Uhrzeit zum Zeitpunkt des Zugriffes</li>
+            <li>Menge der gesendeten Daten in Bytes</li>
+            <li>Quelle/Verweis, von welchem Sie auf diese Seite gelangten</li>
+            <li>Verwendeter Browser</li>
+            <li>Verwendetes Betriebssystem</li>
+            <li>Verwendete IP-Adresse</li>
           </ul>
           <p>Diese Seite verwendet den Dienst <a href="https://fonts.google.com"
               target="_blank" rel="noopener">Google Fonts</a>, um verschiedene
@@ -458,8 +426,8 @@ <h3>Privacy</h3>
       </div>
     </footer>
 
-    <!-- Update URL when clicking on title without triggering navigation -->
     <script>
+      // Update URL when clicking on title without triggering navigation
       Array.prototype.slice.call(document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h1[data-to],h2[data-to],h3[data-to],h4[data-to]'))
         .forEach(function (element) {
           element.addEventListener('click', function () {
@@ -469,7 +437,7 @@ <h3>Privacy</h3>
               var url = location.href;
 
               if (url.indexOf('#') > 0) url = url.replace(/#.*$/, '#' + to);
-              else url = url + '#' + to;
+              else url += '#' + to;
 
               history.replaceState(null, document.title, url);
             }

From 6bf9affc45b0d88cabd1d4642d3bd7eaab027d8b Mon Sep 17 00:00:00 2001
From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com>
Date: Thu, 15 Nov 2018 04:23:42 +0100
Subject: [PATCH 07/10] fix: rename force flag from SmoothScroll to
 Smoothscroll

BREAKING: renamed flag to force polyfill to run
---
 index.html | 2 +-
 index.js   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 74652fe..5c4c95c 100755
--- a/index.html
+++ b/index.html
@@ -178,7 +178,7 @@ <h3 id="force-polyfill">Use the Polyfill even if there is native
           support</h3>
         <div class="row row-wrap">
           <div class="column column-40" style="flex-grow:1;max-width:100%;overflow:auto;">
-            <code>window.__forceSmoothScrollAnchorPolyfill__</code>:
+            <code>window.__forceSmoothscrollAnchorPolyfill__</code>:
           </div>
           <div class="column column-60" style="flex-grow:1;max-width:100%;">
             <p>If this is set to <code>true</code>, anchor navigation
diff --git a/index.js b/index.js
index 44163f9..d38ad9b 100755
--- a/index.js
+++ b/index.js
@@ -3,8 +3,8 @@
   var isBrowser = typeof window !== 'undefined';
 
   // Abort if run outside browser or if smoothscroll is natively supported and
-  // __forceSmoothScrollAnchorPolyfill is not set to true by user
-  if (!isBrowser || window.__forceSmoothScrollAnchorPolyfill__ !== true && 'scrollBehavior' in document.documentElement.style) {
+  // __forceSmoothscrollAnchorPolyfill__ is not set to true by user
+  if (!isBrowser || window.__forceSmoothscrollAnchorPolyfill__ !== true && 'scrollBehavior' in document.documentElement.style) {
     return;
   }
 

From ae5784e4f6c83b5b3eec2b43b9122deae4c24fc8 Mon Sep 17 00:00:00 2001
From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com>
Date: Thu, 15 Nov 2018 06:48:06 +0100
Subject: [PATCH 08/10] feat: support hashes and hashchange

fix #3 When scrolling to an anchor, the hash is now appended to the URL
On hashchange the jumping scroll is canceled, smooth scroll instead
---
 index.js     | 122 +++++++++++++++++++++++++++++++++++++++++----------
 package.json |   2 +-
 2 files changed, 99 insertions(+), 25 deletions(-)

diff --git a/index.js b/index.js
index d38ad9b..97501e0 100755
--- a/index.js
+++ b/index.js
@@ -48,19 +48,35 @@
 
   /**
    * Focuses an element, if it's not focused after the first try,
-   * allow focusing by adjusting tabIndex and retry
+   * allows focusing by adjusting tabIndex and retry
    * @param {HTMLElement} el
    */
   function focusElement(el) {
     el.focus({ preventScroll: true });
     if (document.activeElement !== el) {
-      el.setAttribute('tabIndex', '-1');
+      el.setAttribute('tabindex', '-1');
       // TODO: Only remove outline if it comes from the UA, not the user CSS
       el.style.outline = 'none';
       el.focus({ preventScroll: true });
     }
   }
 
+  /**
+   * Returns the element whose id matches the hash or
+   * document.body if the hash is "#top" or "" (empty string)
+   * @param {string} hash
+   */
+  function getScrollTarget(hash) {
+    if (typeof hash !== 'string') return null;
+
+    // Retrieve target if an id is specified in the hash, otherwise use body.
+    // If hash is "#top" and no target with id "top" was found, also use body
+    // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href
+    var target = hash ? document.getElementById(hash.slice(1)) : document.body;
+    if (hash === '#top' && !target) target = document.body;
+    return target;
+  }
+
   /**
    * Walks up the DOM starting from a given element until an element satisfies the validate function
    * @param {HTMLElement} element The element from where to start validating
@@ -76,6 +92,27 @@
   // Stores the setTimeout id of pending focus changes, allows aborting them
   var pendingFocusChange;
 
+  /**
+   * Scrolls to a given element or to the top if the given element
+   * is document.body, then focuses the element
+   * @param {HTMLElement} target
+   */
+  function triggerSmoothscroll(target) {
+    // Clear potential pending focus change triggered by a previous scroll
+    if (!supportsPreventScroll) window.clearTimeout(pendingFocusChange);
+
+    // Use JS scroll APIs to scroll to top (if target is body) or to the element
+    // This allows polyfills for these APIs to do their smooth scrolling magic
+    var scrollTop = target === document.body;
+    if (scrollTop) window.scroll({ top: 0, left: 0, behavior: 'smooth' });
+    else target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+    // If the browser supports preventScroll: immediately focus the target
+    // Otherwise schedule the focus so the smoothscroll isn't interrupted
+    if (supportsPreventScroll) focusElement(target);
+    else pendingFocusChange = setTimeout(focusElement.bind(null, target), 450);
+  }
+
   /**
    * Check if the clicked target is an anchor pointing to a local element,
    * if so prevent the default behavior and handle the scrolling using the
@@ -86,38 +123,75 @@
     // Abort if shift/ctrl-click or not primary click (button !== 0)
     if (evt.metaKey || evt.ctrlKey || evt.shiftKey || evt.button !== 0) return;
 
-    var clickTarget = getEventTarget(evt);
     // Check the DOM from the click target upwards if a local anchor was clicked
-    var anchor = findInParents(clickTarget, isAnchorToLocalElement);
+    var anchor = findInParents(getEventTarget(evt), isAnchorToLocalElement);
     if (!anchor) return;
 
+    // Find the element targeted by the hash
     var hash = anchor.hash;
-
-    // Retrieve target if an id is specified in the hash, otherwise use body.
-    // If hash is "#top" and no target with id "top" was found, also use body
-    // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href
-    var target = hash ? document.getElementById(hash.slice(1)) : document.body;
-    if (hash === '#top' && !target) target = document.body;
+    var target = getScrollTarget(hash);
 
     if (target) {
       // Prevent default browser behavior to avoid a jump to the anchor target
       evt.preventDefault();
-      // Clear potential pending focus change triggered by a previous scroll
-      if (!supportsPreventScroll) window.clearTimeout(pendingFocusChange);
-
-      // Use scroll APIs to scroll to top (if target is body) or to the element
-      // This allows polyfills for these APIs to do their smooth scrolling magic
-      var scrollTop = target === document.body;
-      if (scrollTop) window.scroll({ top: 0, left: 0, behavior: 'smooth' });
-      else target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-
-      // If the browser supports preventScroll: immediately focus the target
-      // Otherwise schedule the focus so the smoothscroll isn't interrupted
-      if (supportsPreventScroll) focusElement(target);
-      else pendingFocusChange = setTimeout(focusElement, 450, target);
+
+      // Trigger the smooth scroll
+      triggerSmoothscroll(target);
+
+      // Append the hash to the URL
+      if (history.pushState) {
+        history.pushState(null, document.title, (hash || '#'));
+      }
     }
 
   }
 
+  /**
+   * Returns the scroll offset towards the top
+   */
+  function getScrollTop() {
+    return document.documentElement.scrollTop || document.body.scrollTop;
+  }
+
+  /**
+   * Tries to undo the automatic, instant scroll caused by a hashchange
+   * and instead scrolls smoothly to the new hash target
+   */
+  function attachHashchangeListener() {
+    // Some browsers don't trigger a scroll event before the hashchange,
+    // so to undo, the position last reported is the one we need to go back to.
+    // In others (e.g. IE) the scroll listener is triggered before the
+    // hashchange occurs, thus the last reported position is already the new one
+    // updated by the hashchange – we need the second last to undo.
+    var lastTwoScrollPos = [];
+
+    // Keep the scroll positions up to date
+    document.addEventListener('scroll', function () {
+      lastTwoScrollPos[0] = lastTwoScrollPos[1];
+      lastTwoScrollPos[1] = getScrollTop();
+    });
+
+    window.addEventListener("hashchange", function () {
+      var target = getScrollTarget(location.hash);
+      if (!target) return;
+
+      // If the position last reported by the scroll listener is the same as the
+      // current one caused by a hashchange, go back to second last – else last
+      var currentPos = getScrollTop();
+      var top = lastTwoScrollPos[lastTwoScrollPos[1] === currentPos ? 0 : 1];
+
+      // Undo the scroll caused by the hashchange...
+      window.scroll({ top: top, behavior: 'instant' });
+      // ...and instead smoothscroll to the target
+      triggerSmoothscroll(target);
+    });
+  }
+
+  // Attach listeners if body is already available, else wait until DOM is ready
+  if (document.body) attachHashchangeListener();
+  else document.addEventListener("DOMContentLoaded", attachHashchangeListener);
+
+  // Register the click handler listening for clicks on anchor links
   document.addEventListener('click', handleClick, false);
-})()
\ No newline at end of file
+
+})();
\ No newline at end of file
diff --git a/package.json b/package.json
index ceae6f6..581c6f8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "smoothscroll-anchor-polyfill",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Apply smooth scroll to anchor links to replicate CSS scroll-behavior",
   "main": "dist/index.js",
   "browserslist": [

From 3081f76936d9c528f04f2a4a0ececd8f2a0f4964 Mon Sep 17 00:00:00 2001
From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com>
Date: Thu, 15 Nov 2018 06:48:33 +0100
Subject: [PATCH 09/10] docs: update demo/docs for IE9 support

---
 index.css  | 13 ++++++++++++-
 index.html | 44 +++++++++++---------------------------------
 2 files changed, 23 insertions(+), 34 deletions(-)

diff --git a/index.css b/index.css
index d516031..35e1a70 100755
--- a/index.css
+++ b/index.css
@@ -70,13 +70,24 @@ section, .fullscreen {
 
 .fullscreen {
   height: 100vh;
+  text-align: center;
 }
 
 .fullscreen {
+  position: relative;
+}
+
+html:not(.flex-center) .fullscreen>div {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.flex-center .fullscreen {
   display: flex;
   justify-content: center;
   align-items: center;
-  text-align: center;
 }
 
 .fullscreen p {
diff --git a/index.html b/index.html
index 5c4c95c..b884fb9 100755
--- a/index.html
+++ b/index.html
@@ -6,6 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>smoothscroll-anchor-polyfill</title>
+    <script>
+      // Some Polyfills for Internet Explorer 9, needed for this page
+      // Super cheap requestAnimationFrame polyfill
+      'requestAnimationFrame' in window || (window.requestAnimationFrame = function (a) { setTimeout(a, 0) });
+      // Element.classList polyfill
+      ; (function () { function a(e) { this.element = e } var b = function (e) { return e.replace(/^\s+|\s+$/g, '') }, c = function (e) { return new RegExp('(^|\\s+)' + e + '(\\s+|$)') }, d = function (e, f, g) { for (var h = 0; h < e.length; h++)f.call(g, e[h]) }; a.prototype = { add: function add() { d(arguments, function (e) { this.contains(e) || (this.element.className = b(this.element.className + ' ' + e)) }, this) }, remove: function remove() { d(arguments, function (e) { this.element.className = b(this.element.className.replace(c(e), ' ')) }, this) }, toggle: function toggle(e) { return this.contains(e) ? (this.remove(e), !1) : (this.add(e), !0) }, contains: function contains(e) { return c(e).test(this.element.className) }, item: function item(e) { return this.element.className.split(/\s+/)[e] || null }, replace: function replace(e, f) { this.remove(e), this.add(f) } }, 'classList' in Element.prototype || Object.defineProperty(Element.prototype, 'classList', { get: function get() { return new a(this) } }), window.DOMTokenList && !DOMTokenList.prototype.replace && (DOMTokenList.prototype.replace = a.prototype.replace) })();
+    </script>
     <!-- Use some polyfill for the smoothscroll JavaScript API -->
     <script src="https://unpkg.com/smoothscroll-polyfill"></script>
     <!-- Use this polyfill to apply the JS smoothscroll to anchor links -->
@@ -18,24 +25,7 @@
 
     <script>
       // Hide header after scroll (mobile only)
-      document.addEventListener('DOMContentLoaded', function () {
-        var d = document, bd = d.body, bdClass = bd.classList;
-        var prevScrollPos = d.documentElement.scrollTop || bd.scrollTop;
-
-        d.addEventListener('scroll', function () {
-          var scrollPos = d.documentElement.scrollTop || bd.scrollTop;
-          var distance = scrollPos - prevScrollPos;
-
-          // Only react if user scrolled more than 25px
-          if (Math.abs(distance) < 25) return;
-
-          // Show or hide header depending on scroll direction
-          if (distance > 0) bdClass.add('hide-header');
-          else bdClass.remove('hide-header');
-
-          prevScrollPos = scrollPos;
-        }, false);
-      })
+      document.addEventListener('DOMContentLoaded', function () { var a = document, b = a.body, c = b.classList, e = a.documentElement.scrollTop || b.scrollTop; a.addEventListener('scroll', function () { var f = a.documentElement.scrollTop || b.scrollTop, g = f - e; 25 > Math.abs(g) || (0 < g ? c.add('hide-header') : c.remove('hide-header'), e = f) }, !1) });
     </script>
   </head>
 
@@ -428,21 +418,9 @@ <h3>Privacy</h3>
 
     <script>
       // Update URL when clicking on title without triggering navigation
-      Array.prototype.slice.call(document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h1[data-to],h2[data-to],h3[data-to],h4[data-to]'))
-        .forEach(function (element) {
-          element.addEventListener('click', function () {
-            var to = element.id || element.getAttribute('data-to');
-
-            if (to !== null && to !== undefined) {
-              var url = location.href;
-
-              if (url.indexOf('#') > 0) url = url.replace(/#.*$/, '#' + to);
-              else url += '#' + to;
-
-              history.replaceState(null, document.title, url);
-            }
-          })
-        });
+      ; Array.prototype.slice.call(document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h1[data-to],h2[data-to],h3[data-to],h4[data-to]')).forEach(function (a) { a.addEventListener('click', function () { var b = a.id || a.getAttribute('data-to'); if (null !== b && b !== void 0) { var c = location.href; 0 < c.indexOf('#') ? c = c.replace(/#.*$/, '#' + b) : c += '#' + b, history.replaceState(null, document.title, c) } }) });
+      // Flexbox feature detect
+      ; (function (d) { ('alignItems' in d.documentElement.style) && (d.documentElement.className += " flex-center") })(document)
     </script>
   </body>
 

From ab54cb1a426909c24ea3c89711ba9e23b8897257 Mon Sep 17 00:00:00 2001
From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com>
Date: Thu, 15 Nov 2018 07:10:42 +0100
Subject: [PATCH 10/10] docs: add changelog

---
 CHANGELOG.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100755 CHANGELOG.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100755
index 0000000..a7cab86
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,23 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.12.0] - 2018-11-15
+### Added
+- The special fragment `#top` is now supported for scrolling to the top, but only if no element with id `top` is found
+- After navigating to an anchor, the respective hash is now appended to the URL using `history.pushState()` to match default browser behavior.
+- When a hashchange event occurs, the polyfill tries to cancel the instant jumping scroll to the new hash, handling it with the smooth scroll instead.
+- When navigating to an anchor, the anchor is now focused.
+- In browsers supporting the optional `preventScroll` argument, the anchor is focused immediately and the focus scroll is prevented by passing this argument.
+- If the browser doesn't support `preventScroll` (e.g. Internet Explorer), the focus is scheduled to happen 450ms after the smooth scroll started so it does not interfere with the smooth scrolling (which caused flickering).
+
+
+### Changed
+- The flag to enforce the polyfill (even if the browser has native support) is now called (`window.__forceSmoothscrollAnchorPolyfill__`). The docs have been updated to reflect this. 
+
+
+### Fixed
+- The polyfill now properly handles Shift/Meta keys and allows for opening links in new windows by shift-clicking instead of preventing it with `event.preventDefault()`
+- The docs website now works in Internet Explorer 9, polyfills for `Element.classList`, `requestAnimationFrame` + an alternative for flexbox layouts have been added