Sichtbares Scrollen um einen best. Wert ohne Positionsangabe

[Max]

Ich versuche schon seit zwei Tagen verzweifelt eine Funktion zu erstellen.
Die Funktion soll bei Klicken auf einen Div am oberen Bildschirmrand jeweils um die Höhe des Anzeigefensters nach oben scrollen, wobei der Scrollvorgang sichtbar sein soll.

Diese Funktionen kann ich aus folgenden Gründen nicht benutzen:

1. Variante (http://www.maxwalker.de/test/variante1.html)
function hoch() {
  var y = 0;
  if (window.pageYOffset) {
    y = window.pageYOffset;
  }
  else if (document.body && document.body.scrollTop) {
    y = document.body.scrollTop;
  }
  if (y > window.innerHeight) {
    window.scrollBy(0, -10);
    setTimeout("hoch()", 1);
  }
}

• scrollt nur zu einer festen Position (scrollt solange wie die vertikale Scrollposition kleiner als die einfache Fensterhöhe ist)
  (Desweiteren ist es problematisch, dass das scrollen nur in 10-Pixel-Schritten erfolgt, weil dadurch bei Fensterhöhen, die nicht durch 10 teilbar sind, der Abschluss nicht richtig ist. Kleinere Schritte sind leider nicht mögich, da die Zeit bei setTimeOut nicht kleiner als 1ms sein darf, wodurch das Scrollen ewig dauert.)

2. Variante (http://www.maxwalker.de/test/variante2.html)

function hoch() {
var a = window.innerHeight / 10;
for(var i=0; i<a; i++) {
window.scrollBy(0, -10);
}
}

--> http://www.maxwalker.de/test/variante2.html

• scrollt zwar um einen bestimmten Wert nach oben (ohne feste Positionsangabe), der Scrollvorgang ist aber nicht sichtbar

Freue mich über jede Hilfe!