From 3ee0c7aa8a5db8dc6ea2dd584449fa2af5f3562e Mon Sep 17 00:00:00 2001 From: Pradyun Gedam Date: Mon, 20 Mar 2023 09:08:57 +0000 Subject: [PATCH] Scroll on load with a sticky banner This ensures that the scroll-margin-top is respected, by triggering a scroll event after the corresponding JS is injected. Co-Authored-By: C.A.M. Gerlach --- .../pep_theme/static/sticky_banner.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/pep_sphinx_extensions/pep_theme/static/sticky_banner.js b/pep_sphinx_extensions/pep_theme/static/sticky_banner.js index cc2ceb3dd0c..f09be2958e1 100644 --- a/pep_sphinx_extensions/pep_theme/static/sticky_banner.js +++ b/pep_sphinx_extensions/pep_theme/static/sticky_banner.js @@ -15,6 +15,7 @@ document.addEventListener("DOMContentLoaded", () => { node.id = "sticky-banner-style"; document.head.appendChild(node); + // Handle changes in banner height function adjustBannerMargin() { const text = document.createTextNode( ":target { scroll-margin-top: " + stickyBanner.offsetHeight + "px; }" @@ -22,7 +23,16 @@ document.addEventListener("DOMContentLoaded", () => { node.replaceChildren(text); } - adjustBannerMargin(); document.addEventListener("resize", adjustBannerMargin); - document.addEventListener("load", adjustBannerMargin); + + // Handle on-load banner height and scrolling to anchor + function adjustBannerMarginAndScroll() { + adjustBannerMargin(); + if (location.hash.length > 1) { + document.getElementById(location.hash.substring(1)).scrollIntoView(); + } + } + + adjustBannerMarginAndScroll(); + document.addEventListener("load", adjustBannerMarginAndScroll); });