Fixing window.scrollTop Error in Blazor MAUI: How to Save and Restore Scroll Position Correctly

Описание: Learn how to properly save and restore scroll position in Blazor MAUI apps using JavaScript interop with correct window methods, avoiding common errors like 'window.scrollTop is not a function'.
---
This video is based on the question https://stackoverflow.com/q/79537065/ asked by the user 'landmann123' ( https://stackoverflow.com/u/4740183/ ) and on the answer https://stackoverflow.com/a/79537678/ provided by the user 'Alec - MSFT' ( https://stackoverflow.com/u/21361705/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Blazor JS Interop // javascript window events and functions not working

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to drop me a comment under this video.
---
The Problem: Saving Scroll Position in Blazor MAUI

In Blazor MAUI Hybrid apps, a common requirement is to save the user's scroll position when navigating between pages, so it can be restored when the user returns.

A common mistake is attempting to use window.scrollTop(), which causes this error:

[[See Video to Reveal this Text or Code Snippet]]

This happens because scrollTop is not a native JavaScript function on the window object—it belongs to jQuery and DOM elements, not the window itself.



Why window.scrollTop() Fails

window.scrollTop() does not exist in vanilla JavaScript.

The window object does not have a scrollTop method.

To get the vertical scroll position of the window, use window.scrollY or window.pageYOffset.



Correct Approach: Use window.scrollY and window.scrollTo

To save and restore scroll position in Blazor MAUI:

Use window.scrollY to get the current vertical scroll position.

Save this value in browser storage (localStorage or sessionStorage).

Use window.scrollTo(x, y) to restore the scroll position.

Example JavaScript functions:

[[See Video to Reveal this Text or Code Snippet]]



Integrating with Blazor MAUI

Here’s a minimal example of calling these JavaScript functions from Blazor:

[[See Video to Reveal this Text or Code Snippet]]



Additional Tips

Avoid using jQuery if possible for such simple tasks.

Register scroll save logic thoughtfully, for example on navigation events or before page unload.

Consider serializing scroll positions per page URL key for multi-page apps.



Summary

Don't use window.scrollTop()—it doesn't exist in pure JavaScript.

Use window.scrollY to get and window.scrollTo(x, y) to set scroll position.

Store scroll positions in localStorage or sessionStorage for persistence.

Invoke these JS functions via Blazor's IJSRuntime for seamless interop.

This approach is reliable and doesn't require loading extra libraries like jQuery.