Fix the compatibility of the smooth scrolling in Safari

Safari(at least on v14) does not support CSS property `scroll-behavior`
This commit is contained in:
Cotes Chung 2020-12-27 14:24:43 +08:00
parent 081e77d462
commit aa6c33526a
5 changed files with 50 additions and 2 deletions

View file

@ -48,7 +48,6 @@ html[mode=dark] {
:root {
font-size: 16px;
scroll-behavior: smooth;
}
body {

View file

@ -12,7 +12,9 @@ $(function() {
});
$("#back-to-top").click(() => {
$("body,html").scrollTop(0);
$("body,html").animate({
scrollTop: 0
}, 800);
return false;
});
});

View file

@ -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() */
});

View file

@ -9,3 +9,5 @@ layout: compress
---
{% include_relative _commons.js %}
{% include_relative _utils/smooth-scroll.js %}

View file

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