Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-04-29 20:13:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add more docs in smoothAnchors

Browse Source
This commit is contained in:
Zoroark 2022-01-19 00:00:59 +01:00
parent 29b76c926b
commit a7f27e757f
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
assets/ts/smoothAnchors.ts
View File

@ -1,6 +1,14 @@
// Implements smooth scrolling when clicking on an anchor link. // Implements smooth scrolling when clicking on an anchor link.
// This is required instead of using modern CSS because Chromium does not currently support scrolling // This is required instead of using modern CSS because Chromium does not currently support scrolling
// one element with scrollTo while another element is scrolled because of a click on a link. This would thus not work with the ToC scrollspy. // one element with scrollTo while another element is scrolled because of a click on a link. This would
// thus not work with the ToC scrollspy and e.g. footnotes.
// Here are additional links about this issue:
// - https://stackoverflow.com/questions/49318497/google-chrome-simultaneously-smooth-scrollintoview-with-more-elements-doesn
// - https://stackoverflow.com/questions/57214373/scrollintoview-using-smooth-function-on-multiple-elements-in-chrome
// - https://bugs.chromium.org/p/chromium/issues/detail?id=833617
// - https://bugs.chromium.org/p/chromium/issues/detail?id=1043933
// - https://bugs.chromium.org/p/chromium/issues/detail?id=1121151
const anchorLinksQuery = "a[href]"; const anchorLinksQuery = "a[href]";
@ -14,12 +22,8 @@ function setupSmoothAnchors() {
clickEvent.preventDefault(); clickEvent.preventDefault();
let targetId = aElement.getAttribute("href").substring(1); let targetId = aElement.getAttribute("href").substring(1);
// The replace done on ':' is here for footnotes, as this character would otherwise interfere when used as a CSS selector.
let target = document.querySelector(`#${targetId.replace(":", "\\:")}`) as HTMLElement; let target = document.querySelector(`#${targetId.replace(":", "\\:")}`) as HTMLElement;
//let tocLink = findLinkForSectionId(targetId, navigation);
//if (tocLink) {
// scrollToTocElement(tocLink, scrollableNavigation);
//}
window.history.pushState({}, "", aElement.getAttribute("href")); window.history.pushState({}, "", aElement.getAttribute("href"));
scrollTo({ top: target.offsetTop, behavior: "smooth" }); scrollTo({ top: target.offsetTop, behavior: "smooth" });