Div-Box automatisch runterscrollen

html.de-Forum JavaScript
1

Hallo,

ich habe folgendes Problem: Ich habe diese DIV-Box:

[HTML]

A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A

#box{position:fixed;top:200px;left:30%;right:30%;bottom:200px;background:#eee;border:1px solid #000;overflow-y:auto;}[/HTML]

Nun ist mein Problem, dass die Box immer zuerst oben angezeigt wird, sodass man dann runterscrollen kann. Bei dieser Box soll es aber andersrum sein, nämlich die Box soll zuerst unten angezeigt werden, sodass man dann hochscrollen kann.

Ich habe leider bei Google nicht viel gefunden, wusste aber auch nicht genau, wie ich es Google kurz und kompakt beschreiben sollte.

Könnt ihr mir vielleicht helfen?

Vielen Dank und
Beste Grüße,

Fabian

2

Hallo,

gerade die Lösung gefunden: Anker :slight_smile:

https://www.administrator.de/frage/div-scroll-auto-html-anker-scrollen-129161.html

Beste Grüße
Fabian

3

Und das sind die praxisüblichen Lösungen ohne speziellen Anker im HTML, dank .scrollTop() und .scrollHeight() :cool:

Natives JS: https://jsfiddle.net/spicelab/efuu7vw2/
jQuery: https://jsfiddle.net/spicelab/u0wf6hva/

-[SIZE=3]Moderation: Gewählter Präfix [Frage] auf [ERLEDIGT] gesetzt[/SIZE]-

4

Vielen Dank für deine Antwort.
Leider funktioniert es nicht, auf deine Weise.

Ich habe es mal auf meinen Webspace hochgeladen: acvm.bplaced.net/test.php

Hat jemand eine Idee?

Danke :slight_smile:

5

Ein Blick in die Fehlerkonsole des Browsers ist immer aufschlußreich, wenn ein Script nicht funktioniert:

ReferenceError: $ is not defined
http://acvm.bplaced.net/test.php
Line 4

Du hast Dich für die zweite Variante mit dem JS-Framework jQuery entschieden. Dazu fehlt in Deinem Code aber noch die Bibliotheksdatei, damit das Script auch läuft.

https://jquery.com/download/

In JSFiddle wird mit einem Klick auf den „JAVASCRIPT“-Button entschieden, ob natives (pures) JS oder eines der aufgelisteten Frameworks zum Einsatz kommt - neben jQuery gibt’s nämlich noch weitere.

Der vollständige und funktionstüchtige Code, der für das ungeübte Auge bei JSFiddle auf den ersten Blick nicht ersichtlich ist, lautet so:

[code=HTML]

html.de - Div-Box automatisch runterscrollen - Demo #2 #box{position:fixed;top:200px;left:30%;right:30%;bottom:200px;background:#eee;border:1px solid #000;overflow-y:auto;}
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
[/code]
6

Nachtrag, weil für Neueinsteiger immer interessant und hilfreich :slight_smile:

jsFiddle Documentation → Tutorial: Start here if you’re new to jsFiddle.

7

Vielen lieben Dank!

8

Gern geschehen :slight_smile:

-[SIZE=3]Moderation: Zurückgewählter Präfix [Frage] wieder auf [ERLEDIGT] zurückgesetzt[/SIZE]-