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 %}