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:
+
+ Warning: It must be called after all `` 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 %}