In my Blazor app, I'm using the following JavaScript to maintain scrolling on my list page after returning from details page. The user experience is not the greatest, it starts at top of the page then jumps to stored scroll position.

Is there a way to make that a better user experience? For example don't show the screen until it's back at the scroll position.

<script>
    window.resetScroll = () => {
        window.scrollTo(0, 0);
    };

    window.storeScrollPosition = () => {
        sessionStorage.setItem('scrollPosition', window.scrollY);
    };

    window.restoreScrollPosition = () => {
        const scrollPosition = sessionStorage.getItem('scrollPosition');
        if (scrollPosition) {
            window.scrollTo(0, parseInt(scrollPosition));
            sessionStorage.removeItem('scrollPosition');
        }
    };
</script>

In my Blazor app, I'm using the following JavaScript to maintain scrolling on my list page after returning from details page. The user experience is not the greatest, it starts at top of the page then jumps to stored scroll position.

Is there a way to make that a better user experience? For example don't show the screen until it's back at the scroll position.

<script>
    window.resetScroll = () => {
        window.scrollTo(0, 0);
    };

    window.storeScrollPosition = () => {
        sessionStorage.setItem('scrollPosition', window.scrollY);
    };

    window.restoreScrollPosition = () => {
        const scrollPosition = sessionStorage.getItem('scrollPosition');
        if (scrollPosition) {
            window.scrollTo(0, parseInt(scrollPosition));
            sessionStorage.removeItem('scrollPosition');
        }
    };
</script>

• javascript
• blazor
• blazor-server-side

• I guess you can show some kind of loader when there is scrollPosition set in the sessionStorage and remove it after the window scrolls there. – CodeThing Commented Mar 13 at 6:27

1 Answer 1

Based on your post

You may try :

Blazor.addEventListener('enhancedload', () =>
{
   const scrollPosition = sessionStorage.getItem('scrollPosition');
   const path=window.location.pathname;

   if (scrollPosition&path=={targetpath}) {
    window.scrollTo(0, parseInt(scrollPosition));
    sessionStorage.removeItem('scrollPosition');
}

});