• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

"Nach oben-Link innerhalb eines "overflow: auto"

112Heidelberg

Neues Mitglied
"Nach oben-Link" innerhalb eines "overflow: auto"

Hallo Community!

Ich bastele gerade an einer Homepage und habe einen rahmen über <body style...etc> eingefügt. hat auch alles soweit hingehauen... damit NICHTS ausserhalb des Rahmens landen kann habe ich eine <div overflow: auto ... etc>- Eigenschaft eingefügt. Jetzt ist meine Frage, ob es irgendeine Möglichkeit gibt INNERHALB dieses <div overflow: auto ...> einen "nach oben-link" einzufügen, damit das ganze automatisch nach oben scrollt. Mit dem normalen "nach oben-link system" kommt man da nicht weit, da dieses ja via JavaScript sagt, dass die seite zurück zum Punkt 0, 0 soll, wo die seite selbst ja ist... allerdings ist die scrollbar vom <div overflow: auto ...> unten und soll nach oben.

Ich hoffe ich habe das irgendwie verständlich rüberbringen können und mir kann jemand helfen.

Mit freundlichen Grüßen, Dorian W.
 
Zuletzt bearbeitet:
Ich hoffe es ist in Ordnung, dass ich "Du" schreibe ;D
Find ich iwie angenehmer als "Sie" und ist hier auch üblich so

Könntest Du Dich noch kurz erbarmen, mir zu erklären, wie das anzuwenden ist?


Du hast den Link
<a href="">nach oben</a>

un wenn man auf den Link klickt, dann soll nach oben gescrollt werden.
<a href="javascript:document.getElementById("div_id").scrollTop=0;">nach oben</a>

un dann wird in dem div mit der id "div_id" nach oben gescrollt
<div id="div_id" style="height:10px;overflow:scroll"><br /><br />Hier steht ganz viel Text<br /><br /></div>
 
Nochmal vielen Dank.

Ich habe leider immernoch ein Problem. Diese "Verlinkung" funktioniert nicht. Also er scrollt beim OnClick nicht nach oben.

Hier mal kurz der Quelltextausschnitt:

<div id="div_id" style="overflow: auto; width: 90%; height: 89%;">

GANZ VIEL TEXT!

<a href="javascript:document.getElementById("div_id") .scrollTop=0;">Zum Seitenanfang</a>
</div>
 
sry, mein fehler...

Habe die Anführungsstriche falsch gesetzt


entweder so
<a href='javascript:document.getElementById("div_id") .scrollTop=0;'>
oder so
<a href="javascript:document.getElementById('div_id') .scrollTop=0;">

kannste dir selber aussuchen
 
Guuut.. Danke!

Hat mich jetzt auch irgendwie überrascht, wie plötzlich etwas passiert ist... Allerdings ist nicht das passiert, was ich eigentlich erwartet hätte...;D Sondern folgendes: fail.jpg

Ich habe gerade gesehen, dass es auf dem Bild schwer erkennbar ist... Was passiert ist die Weiterleitung auf eine weiße Seite, auf der links oben eine 0 steht und oben in der Adresszeile folgendes: javascript:document.getElementById('div_id') .scrollTop=0;
 
Das passiert, wenn du die Anführungszeichen vor javascript und und nach dem ; weglässt. Ergänze diese, und beachte, dass wenn in den Klammern von geteElementById einfache Anführungszeichen sind, du doppelte nehmen musst und umgekehrt.
 
<div id="div_id" style="overflow: auto; width: 90%; height: 89%;">
VIEL TEXT
<a href='javascript:document.getElementById("div_id") .scrollTop=0;'>Zum Seitenanfang</a>
</div>

Ist doch so richtig, oder nicht?

Fehler entsteht nämlich trotzdem...:/
 
aber jetzt hab ich den Fehler gefunden:

Man kann von href nur Funktionen aufrufen
icon_redface.gif


Code:
<script>
function() scrollToTop()
{
 document.getElementById("div_id").scrollTop=0;
}
</script>
<div id="div_id" style="overflow: auto; width: 90%; height: 89%;">
VIEL TEXT
<a href='javascript:scrollToTop()'>Zum Seitenanfang</a>
</div>
 
Ich möchte nochmal ganz großes DANKE für deine Unterstützung aussprechen!

Mir hätte der Fehler eigentlich auch auffallen müssen. Sorry.

So angewendet, wie Du es geschrieben hast. Leider passiert NICHTS, bei OnClick.
 
Zuletzt bearbeitet:
Zurück
Oben