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

[ERLEDIGT] Div-Box automatisch runterscrollen

F

fabian97

Neues Mitglied
Hallo,

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

HTML: 
<div id="box">A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br></div>

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


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
 
Werbung:
Werbung:
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 :)
 
fabian97 schrieb:
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?
Zum Vergrößern anklicken....
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
Zum Vergrößern anklicken....
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:
HTML: 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>html.de - Div-Box automatisch runterscrollen - Demo #2</title>
    <style>
      #box{position:fixed;top:200px;left:30%;right:30%;bottom:200px;background:#eee;border:1px solid #000;overflow-y:auto;}
    </style>
  </head>
  <body>
    <div id="box">A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br></div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
     $('#box').scrollTop($('#box')[0].scrollHeight);
    </script>
  </body>
</html>
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben