update: perfect animation, compatibility issue

4 files changed, 62 insertions, 66 deletions

diff --git a/_includes/extensions/hashlocate.html b/_includes/extensions/hashlocate.html
index d44b249..6faf553 100644
--- a/_includes/extensions/hashlocate.html
+++ b/_includes/extensions/hashlocate.html
@@ -7,30 +7,31 @@
       return;
     }
 
-    var headerHeight = 0;
     var header = document.querySelector('header');
-    if (header) {
-      headerHeight = header.offsetHeight;
-    }
-    var supportPageOffset = window.pageXOffset !== undefined;
-    var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
-
-    var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
-    var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+    var scrollPos = getScrollPos();
+    var offsetY = element.offsetTop - (header.offsetTop + header.offsetHeight + 20);
 
-    var offsetY = element.offsetTop - headerHeight - 12;
-    if (y === offsetY) {
+    if (offsetY  == scrollPos.y) {
       return;
     }
 
-    window.scrollTo(x, offsetY);
+    if (header.offsetTop == 0  && offsetY > scrollPos.y) {
+      offsetY += header.offsetHeight;
+    } else if (header.offsetTop < 0  && offsetY < scrollPos.y) {
+      offsetY -= header.offsetHeight;
+    }
+
+    smoothScrollTo(offsetY);
   }
 
   // The first event occurred
-  if (window.location.hash) {
-    hashLocate(window.location.hash);
-  }
+  window.addEventListener('load', function(event) {
+    if (window.location.hash) {
+      hashLocate(window.location.hash);
+    }
+  });
 
+  // The first event occurred
   window.addEventListener('click', function(event) {
     if (event.target.matches('a')) {
       hashLocate(event.target.getAttribute('href'));
diff --git a/_includes/head.html b/_includes/head.html
index 770a7bf..be3be7a 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -6,7 +6,8 @@
   {%- seo -%}
   <link rel="shortcut icon" href="{{ site.favicon }}">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+  <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
+  <script src="{{ "/assets/js/main.js" | relative_url }}"></script>
   {%- feed_meta -%}
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
     {%- include extensions/google-analytics.html -%}
diff --git a/_includes/sidebar/article-menu.html b/_includes/sidebar/article-menu.html
index aa4184d..7f83160 100644
--- a/_includes/sidebar/article-menu.html
+++ b/_includes/sidebar/article-menu.html
@@ -12,48 +12,49 @@
 </div>
 
 <script>
-  var menu = document.querySelector(".post-menu .post-menu-content");
-  var headings = document.querySelector(".post-content").querySelectorAll("h2, h3, h4, h5, h6");
+  function generateContent() {
+    var menu = document.querySelector(".post-menu .post-menu-content");
+    var headings = document.querySelector(".post-content").querySelectorAll("h2, h3, h4, h5, h6");
 
-  // Generate post menu
-  var menuHTML = '';
-  headings.forEach(function (h) {
-    menuHTML += (
-      '<li class="h-' + h.tagName.toLowerCase() + '">'
-      + '<a href="#h-' + h.getAttribute('id') + '">' + h.textContent + '</a></li>');
-  });
+    // Generate post menu
+    var menuHTML = '';
+    for (var i = 0; i < headings.length; i++) {
+      var h = headings[i];
+      menuHTML += (
+        '<li class="h-' + h.tagName.toLowerCase() + '">'
+        + '<a href="#h-' + h.getAttribute('id') + '">' + h.textContent + '</a></li>');
+    }
 
-  menu.innerHTML = '<ul>' + menuHTML + '</ul>';
+    menu.innerHTML = '<ul>' + menuHTML + '</ul>';
 
-  // The anchor offsetHeight
-  var headerHeight = 0;
-  var header = document.querySelector('header');
-  if (header) {
-    offsetHeight = header.offsetHeight + 12;
-  }
+    // The header element
+    var header = document.querySelector('header.site-header');
 
-  // Active the menu item
-  window.addEventListener('scroll', function (event) {
-    var lastActive = menu.querySelector('.active');
-    var changed = true;
-    for (var i = headings.length - 1; i >= 0; i--) {
-      var h = headings[i];
-      var clientRect = h.getBoundingClientRect();
-      if (clientRect.top < offsetHeight) {
-        var id = 'h-' + h.getAttribute('id');
-        var curActive = menu.querySelector('a[href="#' + id  + '"]');
-        if (curActive) {
-          curActive.classList.add('active');
-        }
-        if (lastActive == curActive) {
-          changed = false;
+    // Active the menu item
+    window.addEventListener('scroll', function (event) {
+      var lastActive = menu.querySelector('.active');
+      var changed = true;
+      for (var i = headings.length - 1; i >= 0; i--) {
+        var h = headings[i];
+        var clientRect = h.getBoundingClientRect();
+        var headerHeight = header.offsetTop + header.offsetHeight + 20;
+        if (clientRect.top <= headerHeight) {
+          var id = 'h-' + h.getAttribute('id');
+          var curActive = menu.querySelector('a[href="#' + id  + '"]');
+          if (curActive) {
+            curActive.classList.add('active');
+          }
+          if (lastActive == curActive) {
+            changed = false;
+          }
+          break;
         }
-        break;
       }
-    }
-    if (lastActive && changed) {
-      lastActive.classList.remove('active');
-    }
-    event.preventDefault();
-  });
+      if (lastActive && changed) {
+        lastActive.classList.remove('active');
+      }
+      event.preventDefault();
+    });
+  }
+  generateContent();
 </script>
diff --git a/_includes/views/header.html b/_includes/views/header.html
index 835d4cb..f23401f 100644
--- a/_includes/views/header.html
+++ b/_includes/views/header.html
@@ -62,21 +62,14 @@
 
 <script>
   (function() {
-    var supportPageOffset = window.pageXOffset !== undefined;
-    var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
-
-    function scrollY() {
-      return supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
-    }
-
-    var lastScrollY = scrollY();
-    var dataset = document.documentElement.dataset;
+    var lastScrollY = getScrollPos().y;
+    var documentElement = document.documentElement;
 
     function storeScrollData() {
-      var y = scrollY();
+      var y = getScrollPos().y;
 
       {%- if banner and header_transparent -%}
-      dataset.headerTransparent = "";
+      documentElement.setAttribute("data-header-transparent", "");
       {%- endif -%}
 
       var scrollStatus = "";
@@ -91,7 +84,7 @@
       }
 
       lastScrollY = y;
-      dataset.scrollStatus = scrollStatus;
+      documentElement.setAttribute("data-scroll-status", scrollStatus);
     }
 
     window.addEventListener('scroll', function(e) {