Mellékelt példa megnyitása előtt szükséges egy KeepingCursorPosition nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
A megoldásban egy scrollTop nevű dinamikus JavaScript property-t használunk fel, mely megadja az adott objektum felső pontjának (Top property) aktuális értéke és az oldalon egyébként elfoglalt helye esetén meghatározható legfelső pontjának értéke közti különbséget pixelben. A property értéke írható és olvasható. Az adott kontrolra (objektumra) a következőképpen hívható: object.scrollTop.
A megoldásban az oldal Body elemének aktuális pozícióját fogjuk kiolvasni akkor, amikor az oldal letöltődik a kliens böngészőjére. Az oldal szerverre küldésében a táblázat soraiban található gombok segítenek, melyeket megnyomva egy kis üzenetablakban megjelenik az oldal aktuális scroll-pozíciója. Ez az oldal töltődésekor nulla.
A megoldás két részből áll: először deklarálni kell egy HTML hidden elemet a lap Form elemén belül, amely hordozni fogja az adott kurzorpozíciót a Form elküldésekor (submit). A hidden mező neve __SROLLPOS lesz:
<input style="Z-INDEX: 104; LEFT: 286px; POSITION: absolute; TOP: 18px" type="hidden" name="__SCROLLPOS">
A Form submit eseményének kezelésére írunk egy JavaScript kezelőfüggvényt, melyet megadunk a Form-unk onsubmit attribútumában. A kód értéket ad a scrollTop property segítségével a hidden mezőnek, így az információ eljuthat a szerverre. Az érték a <body> aktuális pozíciója lesz:
<form id="WebForm1" onsubmit="javascript:return onSubmitForm ();" method="post" runat="server">
...
<script language="javascript">
function onSubmitForm ()
{
WebForm1.__SCROLLPOS.value = myBody.scrollTop;
return true;
}
</script>
Megfigyelhetjük az oldal szerkesztési időben is megtekinthető HTML forrásában, hogy nincs nyitó <body> tag deklarálva. Ez lesz a megoldás kulcsa, hiszen ezt egy ASP kód fogja oldalunkra írni attól függően, hogy tartalmaz-e értéket a hidden mező, vagy sem, vagyis az oldal most töltődik először, vagy egy POSTBACK eredménye. A következőt írja, mikor van értéke a hidden mező value attribútumának:
<%
if (Request["__SCROLLPOS"] != null && Request["__SCROLLPOS"] != String.Empty)
{
int pos = Convert.ToInt32 (Request["__SCROLLPOS"]);
Response.Write ("<body id=\"myBody\" " + "onload=\"javascript:myBody.scrollTop=" + pos + ";window.alert('Aktuális pozíció: " + pos + "')\">");
}
És a következőt, amikor nincs __SCROLLPOS érték:
else
{
int pos1 = Convert.ToInt32 (Request["__SCROLLPOS"]);
Response.Write ("<body id=\"myBody\" MS_POSITIONING=\"GridLayout\" " + "onload=\"window.alert('Aktuális pozíció: " + pos1 + "')\">");
}
%>
A dinamikusan létrehozott <body> elemmel olvassuk, vagy hagyjuk figyelmen kívül az adott információhordozó mező értékét. A fenti megoldás megkönnyíti a felhasználók táblázatokkal való munkáját, de alkalmazható hosszú űrlapok esetén is.