Scroll to top on navigation in REACT app
Question

I have a REACT app. Some of the pages has scroll. When the user scrolled to the middle of the page and then navigates to the next page, the position of the scroll is memorized. The desired behavior is when the user navigates to the new page to scroll to the top of the page.

There is manual how to do it in React ( https://reactrouter.com/web/guides/scroll-restoration ), but how to do it withing OutSysytems?

Hello Elena, I believe this video explains what you need to know. 

https://www.outsystems.com/learn/lesson/1136/javascript-in-mobile-and-reactive-applications


Let me know if it was useful, otherwise, I will look for an example.

Hi folks,

I am also facing the same behavior in OS11 - Reactive app. The video Huarlem provided, while interesting, is 4 years old and covers many topics. It is counterintuitive that navigating to a screen for the first time would load the page partially scrolled. This suggests two things. First that there is a mechanism that sets the page in the middle similar to the old bookmarks/anchors. Second that there is a mechanism that is persisting position info between the origin and destination screens. I can't find where I have goofed...probably because I don't understand how the two things work. Any education most welcome!

<script> 
var element = document.getElementById($parameters.Classname);

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
</script>

// from: https://developer.mozilla.org/de/docs/Web/API/Element/scrollIntoView //

I used the ID of the Page-Title "b1-Title" as value of the inputvariable "Classname".

For value input of "classname" you can use any "name" (=id) of any div-container on the website.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.