Make the anchor scroll position more precise
This commit is contained in:
parent
4cff83268b
commit
7579644e8d
2 changed files with 32 additions and 20 deletions
|
@ -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
|
||||||
destOffset -= (topbarHeight + REM / 2);
|
// because `fnref` has no `%anchor`(see: module.scss) style.
|
||||||
|
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
2
assets/js/dist/post.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue