asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Make the anchor scroll position more precise

Browse source
This commit is contained in:
Cotes Chung 2021-12-06 06:54:52 +08:00
parent 4cff83268b
commit 7579644e8d
2 changed files with 32 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
_javascript/utils/smooth-scroll.js
View file

@ -8,6 +8,11 @@
*/ */
$(function() { $(function() {
const REM = 16; /* 16px */
const $topbarTitle = $("#topbar-title");
const topbarHeight = $("#topbar-wrapper").outerHeight();
const SCROLL_MARK = "scroll-focus";
$("a[href*='#']") $("a[href*='#']")
.not("[href='#']") .not("[href='#']")
.not("[href='#0']") .not("[href='#0']")
@ -15,42 +20,49 @@ $(function() {
if (this.pathname.replace(/^\//, "") === location.pathname.replace(/^\//, "")) { if (this.pathname.replace(/^\//, "") === location.pathname.replace(/^\//, "")) {
if (location.hostname === this.hostname) { if (location.hostname === this.hostname) {
const REM = 16; /* 16px */
const hash = decodeURI(this.hash); const hash = decodeURI(this.hash);
let isFnRef = RegExp(/^#fnref:/).test(hash); let toFootnoteRef = RegExp(/^#fnref:/).test(hash);
let isFn = isFnRef? false : RegExp(/^#fn:/).test(hash); let toFootnote = toFootnoteRef? false : RegExp(/^#fn:/).test(hash);
let selector = hash.includes(":") ? hash.replace(/\:/g, "\\:") : hash; let selector = hash.includes(":") ? hash.replace(/\:/g, "\\:") : hash;
let target = $(selector); let $target = $(selector);
if (target.length) { let parent = $(this).parent().prop("tagName");
let isAnchor = RegExp(/^H\d/).test(parent);
if (typeof $target !== "undefined") {
event.preventDefault(); event.preventDefault();
if (history.pushState) { /* add hash to URL */ if (history.pushState) { /* add hash to URL */
history.pushState(null, null, hash); history.pushState(null, null, hash);
} }
let curOffset = $(this).offset().top; let curOffset = isAnchor? $(this).offset().top : $(window).scrollTop();
let destOffset = target.offset().top; let destOffset = $target.offset().top;
const scrollUp = (destOffset < curOffset);
const topbarHeight = $("#topbar-wrapper").outerHeight();
if (scrollUp && isFnRef) { if (destOffset < curOffset) { // scroll up
/* Avoid the top-bar covering `fnref` when scrolling up if (toFootnoteRef) {
because `fnref` has no `%anchor`(see: module.scss) style. */ // Avoid the top-bar covering `fnref` when scrolling up
// because `fnref` has no `%anchor`(see: module.scss) style.
destOffset -= (topbarHeight + REM / 2); destOffset -= (topbarHeight + REM / 2);
} }
if (isAnchor && $topbarTitle.is(":hidden")) {
destOffset += topbarHeight;
}
} else { // scroll down
if (!isAnchor && !toFootnote) { // the ToC item
destOffset += topbarHeight;
}
}
$("html,body").animate({ $("html,body").animate({
scrollTop: destOffset scrollTop: destOffset
}, 800, () => { }, 800, () => {
const $target = $(target); // const $target = $($target);
$target.focus(); $target.focus();
const SCROLL_MARK = "scroll-focus";
/* clean up old scroll mark */ /* clean up old scroll mark */
if ($(`[${SCROLL_MARK}=true]`).length) { if ($(`[${SCROLL_MARK}=true]`).length) {
$(`[${SCROLL_MARK}=true]`).attr(SCROLL_MARK, false); $(`[${SCROLL_MARK}=true]`).attr(SCROLL_MARK, false);
@ -62,7 +74,7 @@ $(function() {
} }
/* set scroll mark to footnotes */ /* set scroll mark to footnotes */
if (isFn || isFnRef) { if (toFootnote || toFootnoteRef) {
$target.attr(SCROLL_MARK, true); $target.attr(SCROLL_MARK, true);
} }

2
assets/js/dist/post.min.js vendored
View file

File diff suppressed because one or more lines are too long