Nettes JavaScript: Restore Scroll Position

Eigentlich bin ich ja kein Programmierer – aber zwischendurch geht es mal wieder mit mir durch und ich spiele mal wieder „virtuelles Lego-Bauen“. Für einen Kunden habe ich eine kleine Web-Applikation programmiert, welche zwischendurch einen Reload einer Seite macht. Das Problem ist dabei jedoch, dass bei grösseren Inhalten immer ganz nach oben gescrollt wird. Es wäre halt einfach nett, wenn die Scroll-Position gemerkt werden könnte, damit nach einem Reload dieselbe Position wiederhergestellt wird.

Somit habe ich mal Google gefragt, ob er ein solches Script schon kenne – und nach kurzer Suche bin ich auch fündig geworden. Es handelte sich gar um Freeware! Voller Eifer installierte ich das Script und es lief wie eine eins – bis gestern… Da wurde das Script mit einer netten Meldung gestartet, die darauf hinwies, dass man doch etwas an den armen Autoren spenden solle und dann die Meldung nie mehr erscheint. Bei der PayPal-Zahlung solle man doch die URL eingeben, auf welcher das Script eingesetzt wird.

Fazit: Das verschlüsselte JavaScript stellt also eine Verbindung zum Server des Autors her und überprüft den Spendeneingang. Das kann es nun wirklich nicht sein! V.a. deshalb nicht, da ich schon etwas gespendet habe (ich habe mir ja auch die Arbeit erspart, das ganze selbst zu coden). Es kann jedoch definitiv nicht sein, dass im Hintergrund, Verbindungen aufgebaut werden, die dem Script nichts bringen und nicht nötig wären.

Was tut man in dieser Situation? Man programmiert diese Funktion halt doch selber. Und damit auch andere Personen davon profitieren können, stelle ich diese als WIRKLICHE Freeware zum Download bereit – unverschlüsselt, ohne doppelten Boden und ohne Spendenaufruf (wer dennoch gerne spenden möchte: Meine PayPal-ID lautet info@itrain.ch) ;-D…

Das Script muss einfach in eine bestehende Webpage eingebunden werden:

<script src=“recoverscroll.js“></script>

Dann muss die „Recover-Funktion“ im BODY-Tag „onload“ aufgerufen werden:

<body onload=“readScroll();“>

Das entsprechende zugrundeliegende JavaScript sieht wie folgt aus (einfach kopieren und eine neue Datei namens „recoverscroll.js“ erstellen):

function readScroll()
{
 var hscroll2 = readCookie(’scrollposh‘);
 var vscroll2 = readCookie(’scrollposv‘);
 window.scrollTo(hscroll2,vscroll2);
}

function createCookie(name,value,days) {
 if (days) {
  var date = new Date();
  date.setTime(date.getTime()+(days*24*60*60*1000));
  var expires = „; expires=“+date.toGMTString();
 }
 else var expires = „“;
 document.cookie = name+“=“+value+expires+“; path=/“;
}

function readCookie(name) {
 var nameEQ = name + „=“;
 var ca = document.cookie.split(‚;‘);
 for(var i=0;i < ca.length;i++) {
  var c = ca[i];
  while (c.charAt(0)==‘ ‚) c = c.substring(1,c.length);
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
 }
 return null;
}

function eraseCookie(name) {
 createCookie(name,““,-1);
}

function f_scrollLeft() {
 return f_filterResults (
  window.pageXOffset ? window.pageXOffset : 0,
  document.documentElement ? document.documentElement.scrollLeft : 0,
  document.body ? document.body.scrollLeft : 0
 );
}
function f_scrollTop() {
 return f_filterResults (
  window.pageYOffset ? window.pageYOffset : 0,
  document.documentElement ? document.documentElement.scrollTop : 0,
  document.body ? document.body.scrollTop : 0
 );
}
function f_filterResults(n_win, n_docel, n_body) {
 var n_result = n_win ? n_win : 0;
 if (n_docel && (!n_result || (n_result > n_docel)))
  n_result = n_docel;
 return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

window.onscroll=function saveScroll()
{
    var hscroll = 0, vscroll = 0;
   
 if( typeof( window.pageYOffset ) == ’number‘ ) {
     //Netscape compliant
     vscroll = window.pageYOffset;
     hscroll = window.pageXOffset;
    } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
     //DOM compliant
     vscroll = document.body.scrollTop;
     hscroll = document.body.scrollLeft;
    } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
     //IE6 standards compliant mode
     vscroll = document.documentElement.scrollTop;
     hscroll = document.documentElement.scrollLeft;
 }
 createCookie(’scrollposh‘,hscroll,1);
 createCookie(’scrollposv‘,vscroll,1);
}

Viel Spass ;-D!

VN:F [1.9.22_1171]
Rating: 10.0/10 (2 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)
Nettes JavaScript: Restore Scroll Position, 10.0 out of 10 based on 2 ratings

5 Gedanken zu “Nettes JavaScript: Restore Scroll Position

  1. Hi Michael,

    Danke für Deinen Kommentar! Ja: Das mit dem iPhone ist so eine Sache… Da werden wohl keine JavaScript-Cookies unterstützt. Hätte das auch für meine Hausleitsystem-App benötigt… Da gibt es wohl Mittel und Wege, dies über Ajax in einer Server-Variable zu speichern – aber diesen Aufwand habe ich noch gescheut, da es mir bisher zu viel Aufwand machen würde… Aber das wäre bestimmt ein Ansatz…

    Grüessli

    André

  2. Hi André,

    das Script scheint die beste Lösung für mein Problem zu sein. Und dazu so simpel! Wunderbar!

    Allerdings bekomme ich es einfach nicht zum Laufen, ich weiss nicht warum …

    Hast Du vielleicht ein Demo-Page mit dem Script?

    Danke und Grüsse,

    Hugo

Schreib einen Kommentar