Replace jQuery Smooth Scroll with Smooth Scroll + Gumshoe (#2082)

* Replace jQuery Smooth Scroll with Smooth Scroll + Gumshoe
* Change smooth scrolling speed
* Set maximum smooth scroll duration
* Remove Font Awesome CSS Ppseudo elements attribute from JS script

Close #2050, close #2075

_includes/scripts.html

@@ -9,7 +9,7 @@
   {% endfor %}
 {% else %}
   <script src="{{ '/assets/js/main.min.js' | relative_url }}"></script>
-  <script data-search-pseudo-elements defer src="https://use.fontawesome.com/releases/v5.7.1/js/all.js" integrity="sha384-eVEQC9zshBn0rFj4+TU78eNA19HMNigMviK/PU/FFjLXqa/GKPgX58rvt5Z8PLs7" crossorigin="anonymous"></script>
+  <script defer src="https://use.fontawesome.com/releases/v5.7.1/js/all.js" integrity="sha384-eVEQC9zshBn0rFj4+TU78eNA19HMNigMviK/PU/FFjLXqa/GKPgX58rvt5Z8PLs7" crossorigin="anonymous"></script>
 {% endif %}
 
 {% if site.search == true or page.layout == "search" %}

assets/js/_main.js

@@ -5,13 +5,15 @@
 $(document).ready(function() {
   // Sticky footer
   var bumpIt = function() {
-      $("body").css("margin-bottom", $(".page__footer").outerHeight(true));
-    };
+    $("body").css("margin-bottom", $(".page__footer").outerHeight(true));
+  };
 
   bumpIt();
-  $(window).resize(jQuery.throttle(250, function() {
-    bumpIt();
-  }));
+  $(window).resize(
+    jQuery.throttle(250, function() {
+      bumpIt();
+    })
+  );
 
   // FitVids init
   $("#main").fitVids();
@@ -64,65 +66,30 @@ $(document).ready(function() {
   });
 
   // Smooth scrolling
-
-  // Bind popstate event listener to support back/forward buttons.
-  var smoothScrolling = false;
-  $(window).bind("popstate", function (event) {
-    $.smoothScroll({
-      scrollTarget: decodeURI(location.hash),
-      offset: -20,
-      beforeScroll: function() { smoothScrolling = true; },
-      afterScroll: function() { smoothScrolling = false; }
-    });
+  var scroll = new SmoothScroll('a[href*="#"]', {
+    offset: 20,
+    speed: 400,
+    speedAsDuration: true,
+    durationMax: 500
   });
-  // Override clicking on links to smooth scroll
-  $('a[href*="#"]').bind("click", function (event) {
-    if (this.pathname === location.pathname && this.hash) {
-      event.preventDefault();
-      history.pushState(null, null, this.hash);
-      $(window).trigger("popstate");
-    }
+
+  // Gumshoe scroll spy init
+  var spy = new Gumshoe("nav.toc a", {
+    // Active classes
+    navClass: "active", // applied to the nav list item
+    contentClass: "active", // applied to the content
+
+    // Nested navigation
+    nested: false, // if true, add classes to parents of active link
+    nestedClass: "active", // applied to the parent items
+
+    // Offset & reflow
+    offset: 20, // how far from the top of the page to activate a content area
+    reflow: true, // if true, listen for reflows
+
+    // Event support
+    events: true // if true, emit custom events
   });
-  // Smooth scroll on page load if there is a hash in the URL.
-  if (location.hash) {
-    $(window).trigger("popstate");
-  }
-
-  // Scrollspy equivalent: update hash fragment while scrolling.
-  $(window).scroll(jQuery.throttle(250, function() {
-    // Don't run while smooth scrolling (from clicking on a link).
-    if (smoothScrolling) return;
-    var scrollTop = $(window).scrollTop() + 20 + 1;  // 20 = offset
-    var links = [];
-    $("nav.toc a").each(function() {
-      var link = $(this);
-      var href = link.attr("href");
-      if (href && href[0] == "#") {
-        var element = $(href);
-        links.push({
-          link: link,
-          href: href,
-          top: element.offset().top
-        });
-        link.removeClass('active');
-      }
-    });
-    for (var i = 0; i < links.length; i++) {
-      var top = links[i].top;
-      var bottom = (i < links.length - 1 ? links[i+1].top : Infinity);
-      if (top <= scrollTop && scrollTop < bottom) {
-        // Mark all ancestors as active
-        links[i].link.parents("li").children("a").addClass('active');
-        if (links[i].href !== decodeURI(location.hash)) {
-          history.replaceState(null, null, links[i].href);
-        }
-        return;
-      }
-    }
-    if ('#' !== location.hash) {
-      history.replaceState(null, null, '#');
-    }
-  }));
 
   // add lightbox class to all image links
   $(