So implementieren Sie den Reflow zum Scrollen in ein bestimmtes div beim Laden der Seite

Question

So scrollen Sie in ein bestimmtes Div, wenn die Seite geladen wird. Ich habe die CSS-ID in URL mit # erwähnt.

Die Seite enthält 4 Div-Abschnitte. Der Div-Inhalt wird langsam angezeigt. Also ich denke, die Höhe ist nicht richtig eingestellt, so dass die Schriftrolle nicht funktioniert.

Ausgabe: Wurde nicht in erwartete div. Gescrollt. Aber sobald die Seite geladen ist, funktioniert es gut auf Klick.

Mein Code ist:

goTo = jQuery('#content3'); 
jQuery('html,body').animate({ 
    'scrollTop': goTo 
}, 1000); 

Wie dieses Problem mit Reflow-Verfahren zu lösen?

Danke für den Fortschritt !!!

Answer 1

Set Offset oben auf div Element und dies funktionieren wird,

goTo = $('#content3').offset().top; 

window.onload = function() { 
 
    goTo = $('#content3').offset().top; 
 
    $('html,body').animate({ 
 
    'scrollTop': goTo 
 
    }, 1000); 
 
}

div { 
 
    height: 500px; 
 
    border: 1px solid; 
 
    margin-bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content1">Content 1</div> 
 
<div id="content2">Content 2</div> 
 
<div id="content3">Content 3</div> 
 
<div id="content4">Content 4</div>