Window Scroll

I’m not seeing anything in the documentation, I could be blind. The AI Assistant seems to think its possible but I could not get his suggestions to work. Is there a way to scroll to the bottom (or top) of the page programmatically?

Hi @BattleCattleDev,

I’m pretty sure this isn’t mentioned in the docs and the AI Assistant thinks a lot is possible based on data from the internet, which doesn’t apply to UI Bakery though.

Either way, scrolling to the top/bottom is fairly easy. On most websites it comes down to just

windows.scrollTo(0, document.body.scrollHeight) // or 0,0 for top

or for a smoother scrolling

window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });

but this does require the main Body element to be the scrollable element. On very nested websites like UI Bakery, where the scrollable element is not the body, you have to find the scrollable element and execute the same functions with it. On UI Bakery this element would be div.scrollable-container, so the scrolling looks like

const scrollElem = document.querySelector('.scrollable-container');
// scroll to bottom
scrollElem.scrollTo({ left: 0, top: scrollElem.scrollHeight, behavior: "smooth" });
// scroll to top
scrollElem.scrollTo({ left: 0, top: 0, behavior: "smooth" });

From here it’s on you to implement it the way you like and need it, feel free to ask if you still got questions :+1:t3: .

1 Like