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:
parent
081e77d462
commit
aa6c33526a
5 changed files with 50 additions and 2 deletions
|
@ -48,7 +48,6 @@ html[mode=dark] {
|
|||
|
||||
:root {
|
||||
font-size: 16px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
|
@ -12,7 +12,9 @@ $(function() {
|
|||
});
|
||||
|
||||
$("#back-to-top").click(() => {
|
||||
$("body,html").scrollTop(0);
|
||||
$("body,html").animate({
|
||||
scrollTop: 0
|
||||
}, 800);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
|
42
assets/js/_utils/smooth-scroll.js
Normal file
42
assets/js/_utils/smooth-scroll.js
Normal 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() */
|
||||
});
|
2
assets/js/page.min.js
vendored
2
assets/js/page.min.js
vendored
|
@ -9,3 +9,5 @@ layout: compress
|
|||
---
|
||||
|
||||
{% include_relative _commons.js %}
|
||||
|
||||
{% include_relative _utils/smooth-scroll.js %}
|
||||
|
|
3
assets/js/post.min.js
vendored
3
assets/js/post.min.js
vendored
|
@ -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 %}
|
||||
|
|
Loading…
Reference in a new issue