Wer mit langen Listen im Browser hantiert, weis ob des Problems. Man lädt die Seite neu. Egal ob durch ein Post oder simples refressh, die Seite wird neu geladen und man steht wieder ganz oben.
Mit ASP.NET Webforms reicht ein einfaches MaintainScrollPositionOnPostBack. Warum das dort einfach und sonst kompliziert ist,, kläre ich gleich auf.
Das schöne an HTML und HTTP ist die Statuslosigkeit. Hier möchte ich allerdings den Status im Request Response Zyklus – die Scrollposition – behalten und wiederherstellen. Dafür gibt es die technologischen Ansätze: Cookie, Querystring, Input Form Post seit Anbegin des Webs. Neuerdings bieten die Browser per JavaScript API auch die Möglichkeit im lokalen Speicher des Browsers ganz ohne hin und her Daten abzulegen, der Localstorage. Ein Ansatz der mir nicht gefällt, aber von den meisten per Google suche “keep scroll position after refresh” gefundenen Ergebnissen enthalten ist.
Ich wollte den Ansatz von ASP.NET Webforms weiter bauen. Das Problem in einer HTML Seite können beliebig viele FORM Elemente enthalten sein. Als Entwickler muss ich dafür sorgen das ein INPUT, am besten Hidden, im aktuellen geposteten Form enthalten ist und der ScrollPos Wert als Wert enthalten ist. Um ein Input in der Forms Auflistung auch übermittelt zu bekommen, muss es ein name Attribut besitzen. Dafür hängt man sich per JavaScript an das komplette HTML Document und behandelt das OnSubmit Event.
1: document.addEventListener("DOMContentLoaded", function (event) {
2: window.onsubmit = function (event) {
3: var input = document.createElement("input");
4: input.name = "scrollpos";
5: input.id = "scrollpos";
6: input.value = this.scrollY.toLocaleString();
7: input.type = "hidden";
8: event.target.appendChild(input);
9: };
10: });
Jetzt benötigt man aber eine server basierte Programmiersprache um den Inhalt des Formulars auszulesen( die Scrollpos) und eine JavaScript funktion zu rendern die beim Aufruf der Website die JavaScript Funktion aufruft um die neue alte Position wieder herzustellen.
In diesem Fall ist es eine Razor Page die per Binding die Variable dem Page Model zuweist
1: public class ScrollModel : PageModel
2: {
3: [BindProperty]
4: public float scrollpos { get; set; }
Im View der Razor Page wird dann C# und HTML Code gemischt um den HTMLRenderer die Scrollposition in den JavaScript Code einfügen zu lassen. Den JavaScript Code positionieren sie am Ende der Seite oder wenn eine Razor Page in einer @section Scripts.
Sie können “smooth” scrollen oder per “instant” springen.
1: if (@Model.scrollpos> 0) window.scroll({
2: top: @Model.scrollpos,
3: left: 0,
4: behavior: "instant",
5: });