on the pelican docs site, i checked the following items to confirm hypothesis:

.page-content has a height of 100vh, indicating it’s the real scroll container
document.body.scrollTop and document.documentElement.scrollTop remained 0, but .page-content.scrollTop showed a nonzero value when scrolled
saw no overflow-y on body; .page-content was handling vertical scroll

tested by injecting snippets in the devtools console:

this temporarily renames the function in console to prevent it from interfering
window.onscroll = null;

and this replaces it by switching the scroll listener to .page-content

// 1. Grab the .page-content element and #ScrollToTop
let scrollerTest = document.querySelector('.page-content');
let scrollTopBtn = document.querySelector('#ScrollToTop');

// 2. Define a quick test function
function testScroll() {
  if (scrollerTest.scrollTop > 100) {
    scrollTopBtn.style.display = 'block';
  } else {
    scrollTopBtn.style.display = 'none';
  }
}

// 3. Attach the scroll event listener
scrollerTest.addEventListener('scroll', testScroll);

// 4. Optionally hide the button at the start
scrollTopBtn.style.display = 'none';

which worked as the solution.

Back to Top Button JS #599

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions