✔ Zum neuem Element im DOM scrollen = offset().top gibt falschen Wert zurück

daveG

daveG

Grünschnabel
Hi, ich brauche mal eure Hilfe. @jquery

Per append() füge ich dem DOM ein neues Element hinzu und danach soll zu diesem gescrollt werde.

Ablauf:
1. Element hinzufügen
Javascript: 
$('.element_2').append(' div mit id=5 ');

2. und dann zum neuen Element scrollen
Javascript: 
$('html, body').animate({
      scrollTop: $('#5').offset().top
});

HTML aufbau:
HTML: 
<div class="element_1">
   <div class="element_2">
       <div class="element_3" id="1"></div>
       <div class="element_3" id="2"></div>
       <div class="element_3" id="3"></div>
       <div class="element_3" id="4"></div>
       <div class="element_3" id="5"></div>
   </div>
</div>

Nun: offset().top gibt mir einen ganz falschen Wert zurück. Wenn ich aber den "scrollTop"-Code:

Javascript: 
$('html, body').animate({
      scrollTop: $('#5').offset().top
});

zum überprüfen in der Console (console.log) ausführe ist der Wert auf einmal richtig. Hilfe? Tipps? Ich komm bei der Fehlersuche nicht weiter, besonders da der Wert in der Console auf einmal stimmt.
 
Zuletzt bearbeitet:
Ich kann das Problem leider noch nicht ganz nachvollziehen. Was genau ist für dich unerwartetes Verhalten? Dein Code funktioniert bei mir einwandfrei.

In welcher Reihenfolge stehen deine Codeausschnitte? Welchen Browser verwendest du?
 
Hi,

wie beschrieben.

- Chrome

nachdem append() wird per .offset().top die Element-Position des "append()"-Elements ermittelt und diese ist aber falsch.

Führe ich zur Überprüfung offset().top (*1) für dieses Element in der Console aus, bekommen ich auf einmal den richtig wert, also die Top-Position des "append()"-Elements.

(*1)
Javascript: 
$('html, body').animate({
      scrollTop: $('#5').offset().top
});

Ich mache über die Console also das, was das Script macht noch einmal und dann stimmt es? Ich versteh es ja selber nicht.

In der Console funktioniert es, beim normalen Aufruf nicht.
 
Kannst du mal deinen kompletten Code zur Verfügung stellen? Du verwendest die Techniken absolut korrekt und eigentlich sollte nach dem was du beschreibst alles funktionieren.
 
Hat ein sog. "CSS-Reset" der Randabstände margin u. padding stattgefunden, den diverse HTML-Elemente als Voreinstellung mitbringen?

Zum Beispiel zu Beginn des Stylesheets per Universalselektor * für alle im HTML-Dokument enthaltenen Elemente?
CSS: 
* {margin:0;padding:0}
Oder eben für spezielle Elemente, wie z.B. <html>, <body>, <h1-6>, <p>, <ul>/<ol>/<dl>, <p>, ...?
 
Der Aufbau ist der von #1 :cool: nur auf simpel.

Die ganze Sache ist zu groß zum Posten sorry. Vielleicht kann mir jemand etwas mehr über offset() sagen, zb. was zu beachten ist, was ich vielleicht noch nicht weiß.
 
Ich bin ein Depp. Fehler gefunden, sorry! Ich habe über dem "append()"-Element ein Textarea, die Höhe wird automatisch eingestellt, je nach Textinhalt.

Wird der Text gespeichert, geht das Textarea wieder in die Ausgangspostion, also Text löschen und auf Höhe XX px zurück. Das <div class="element_2"> war im Augenblick der "offset().top"-Erkennungen also wesentlich weiter unter.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück