Hi,
I have a page in my website that contains a table of contents with hyperlinks that scroll to corresponding paragraphs on that page.
I gave the paradraphs html ids that are used by the table of contents “on click” to scroll the page to the relevant paragraph. The following is the custom js:
const elementID = context.item.data?.['id'];
const node = document.getElementById(elementID);
const yourHeight = 88; //This is how far down the page you need the element to scroll to. Relevant primarily if you have a sticky horizontal navigation/header.
node.scrollIntoView(true);
const scrolledY = window.scrollY;
if (scrolledY) {
window.scroll(0, scrolledY - yourHeight);
}
I’m experiencing 2 issues:
-
The js logic works for the editor, but is off in the published website.
Here is the table of contents:
When I click “Armata Pharmaceuticals” in the ediot, it scrolls here
However, when I do the same on the published site, it goes here:
-
The other issues is when i’m in the published website and I click a link from the table of contents, it scrolls down the page near the clicked element (but not exactly, as specifies above). Then if I try to click a link from the visible part of the table of contents in the current position, the screen moves a bit, but doesnt go near the requested paragraph. This behaviour only fails in the published version, not the editor.
Video
