Scroll to element in hash after hero height is set
There's a bit of manually re-implementing what browsers already do here, but it's very simple and works very nicely
This commit is contained in:
parent
38cc5182ca
commit
78b310faa3
1 changed files with 24 additions and 6 deletions
|
@ -13,6 +13,12 @@ function setHeroHeight() {
|
||||||
ROOT.style.setProperty("--hero-height", `${getHeroHeight()}px`);
|
ROOT.style.setProperty("--hero-height", `${getHeroHeight()}px`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function scrollToElement(element, behavior = "smooth") {
|
||||||
|
const rect = element.getBoundingClientRect();
|
||||||
|
const top = rect.top - getHeroHeight();
|
||||||
|
window.scrollBy({ top: top, behavior });
|
||||||
|
}
|
||||||
|
|
||||||
function handleHeroStuck() {
|
function handleHeroStuck() {
|
||||||
if (HERO.getBoundingClientRect().top === 0) {
|
if (HERO.getBoundingClientRect().top === 0) {
|
||||||
HERO.classList.add("stuck");
|
HERO.classList.add("stuck");
|
||||||
|
@ -39,11 +45,7 @@ window.addEventListener("load", () => {
|
||||||
document.querySelectorAll("#table-of-contents li a").forEach((element) => {
|
document.querySelectorAll("#table-of-contents li a").forEach((element) => {
|
||||||
element.addEventListener("click", (event) => {
|
element.addEventListener("click", (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const rect = document
|
scrollToElement(document.querySelector(event.target.hash));
|
||||||
.querySelector(event.target.hash)
|
|
||||||
.getBoundingClientRect();
|
|
||||||
const top = rect.top - getHeroHeight();
|
|
||||||
window.scrollBy({ top: top, behavior: "smooth" });
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -56,7 +58,23 @@ window.addEventListener("load", () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
window.addEventListener("DOMContentLoaded", () => {
|
||||||
|
setHeroHeight();
|
||||||
|
|
||||||
|
let scrollTarget = null;
|
||||||
|
try {
|
||||||
|
scrollTarget = document.getElementById(window.location.hash.slice(1));
|
||||||
|
} catch {
|
||||||
|
// Probably an invalid selector - just ignore it
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!scrollTarget) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
scrollToElement(scrollTarget, "auto");
|
||||||
|
});
|
||||||
|
|
||||||
window.addEventListener("resize", debounce(setHeroHeight, 2000));
|
window.addEventListener("resize", debounce(setHeroHeight, 2000));
|
||||||
window.addEventListener("load", setHeroHeight);
|
|
||||||
|
|
||||||
window.addEventListener("scroll", throttle(handleHeroStuck, 100));
|
window.addEventListener("scroll", throttle(handleHeroStuck, 100));
|
||||||
|
|
Loading…
Reference in a new issue