From aa6c33526aa8c53ad45039afa7ebecfa58f794f3 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 27 Dec 2020 14:24:43 +0800
Subject: [PATCH] Fix the compatibility of the smooth scrolling in Safari

Safari(at least on v14) does not support CSS property `scroll-behavior`
---
 assets/css/_addon/main.scss       |  1 -
 assets/js/_commons/back-to-top.js |  4 ++-
 assets/js/_utils/smooth-scroll.js | 42 +++++++++++++++++++++++++++++++
 assets/js/page.min.js             |  2 ++
 assets/js/post.min.js             |  3 +++
 5 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 assets/js/_utils/smooth-scroll.js

diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss
index 8b2adda..6cbd09f 100644
--- a/assets/css/_addon/main.scss
+++ b/assets/css/_addon/main.scss
@@ -48,7 +48,6 @@ html[mode=dark] {
 
 :root {
   font-size: 16px;
-  scroll-behavior: smooth;
 }
 
 body {
diff --git a/assets/js/_commons/back-to-top.js b/assets/js/_commons/back-to-top.js
index 377e35f..1807332 100644
--- a/assets/js/_commons/back-to-top.js
+++ b/assets/js/_commons/back-to-top.js
@@ -12,7 +12,9 @@ $(function() {
   });
 
   $("#back-to-top").click(() => {
-    $("body,html").scrollTop(0);
+    $("body,html").animate({
+      scrollTop: 0
+    }, 800);
     return false;
   });
 });
diff --git a/assets/js/_utils/smooth-scroll.js b/assets/js/_utils/smooth-scroll.js
new file mode 100644
index 0000000..0f6316e
--- /dev/null
+++ b/assets/js/_utils/smooth-scroll.js
@@ -0,0 +1,42 @@
+/*
+  Safari doesn't support CSS `scroll-behavior: smooth`,
+  so here is a compatible sollution for all browser to smooth scrolling
+
+  See: <https://css-tricks.com/snippets/jquery/smooth-scrolling/>
+
+  Warning: It must be called after all `<a>` tags (e.g., the dynamic TOC) are ready.
+*/
+
+$(function() {
+  $("a[href*='#']")
+    .not("[href='#']")
+    .not("[href='#0']")
+    .click(function(event) {
+
+    if (location.pathname.replace(/^\//, "") === this.pathname.replace(/^\//, "")
+      && location.hostname === this.hostname) {
+
+      var target = $(decodeURI(this.hash));
+
+      if (target.length) {
+
+        event.preventDefault();
+
+        $("html, body").animate({
+          scrollTop: target.offset().top
+        }, 800, function() {
+          var $target = $(target);
+          $target.focus();
+
+          if ($target.is(":focus")) { /* Checking if the target was focused */
+            return false;
+          } else {
+            $target.attr("tabindex", "-1"); /* Adding tabindex for elements not focusable */
+            $target.focus(); /* Set focus again */
+          }
+        });
+      }
+    }
+
+  }); /* click() */
+});
diff --git a/assets/js/page.min.js b/assets/js/page.min.js
index 9dfa152..d9a7a53 100644
--- a/assets/js/page.min.js
+++ b/assets/js/page.min.js
@@ -9,3 +9,5 @@ layout: compress
 ---
 
 {% include_relative _commons.js %}
+
+{% include_relative _utils/smooth-scroll.js %}
diff --git a/assets/js/post.min.js b/assets/js/post.min.js
index 3bcd2d4..c86d592 100644
--- a/assets/js/post.min.js
+++ b/assets/js/post.min.js
@@ -17,3 +17,6 @@ layout: compress
 {% include_relative _utils/img-hyperlink.js %}
 
 {% include_relative _utils/lang-badge.js %}
+
+{% comment %} `smooth-scroll.js` must be called after ToC is ready {% endcomment %}
+{% include_relative _utils/smooth-scroll.js %}