2012-05-24 22 views
62
<div id="containerDiv"></div> 
#containerDiv { 
    position: absolute; 
    top: 0px; 
    width: 400px; 
    height: 100%; 
    padding: 5px; 
    font-size: .875em; 
    overflow-y: scroll; 
} 
document.getElementById("containerDiv").innerHTML = variableLongText; 

Wie die Scroll-Position nach oben Behälter wieder zurückgesetzt werden das nächste Mal div?Scroll nach oben von div

Antwort

105
var myDiv = document.getElementById('containerDiv'); 
myDiv.innerHTML = variableLongText; 
myDiv.scrollTop = 0; 

Siehe scrollTop Attribut.

+0

versucht, aber es hat nicht funktioniert. Wenn eine VariableLongtext in das Container-Div geladen ist und in der Mitte davon schaut, wische dann zur neuen VariableLongtext, sie wird im Container angezeigt, aber wir werden nicht auf den Anfang der It sehen, sie wird bereits gescrollt ein bisschen runter. – imhere

+0

@ s12345 Sie sollten einen reproduzierbaren Testfall erstellen, der uns Ihr Problem zeigt (z. B. auf http://jsfiddle.net) und sagen Sie, unter welchem ​​Betriebssystem/Browser/welcher Version Sie das Problem haben. – Phrogz

+1

Sorry mein Fehler .. es funktioniert! Wurde mit zwei ähnlichen Divs verwechselt. – imhere

50

Ein anderer Weg, um es mit einer glatten Animation zu tun ist, wie dies

$("#containerDiv").animate({ scrollTop: 0 }, "fast"); 
+6

Funktioniert gut, aber ** bitte ** nicht "langsam" verwenden, es ist so ... langsam! – Pascal

+1

Anstatt "langsam" als zweites Argument zu übergeben. Sie können eine ganze Zahl übergeben, die die Anzahl der Millisekunden für die Beendigung der Animation ist. –

+0

Dies ist der beste Weg, den ich bisher gefunden habe. Es sieht gut aus mit dem zweiten Arg auf 'schnell', 1000 oder 500 gesetzt. – ekerner

18

ich auf diese Frage, die bestehenden Antworten versucht, und keiner von ihnen arbeitete für mich auf Chrome. Was hat funktioniert etwas anders war:

$('body, html, #containerDiv').scrollTop(0); 
0

Für mich ist die scrollTop Weg hat nicht funktioniert, aber ich fand andere:

element.style.display = 'none'; 
setTimeout(function() { element.style.display = 'block' }, 100); 

Haben die minimale Zeit für eine zuverlässige CSS-Rendering wenn auch nicht überprüfen, könnte 100ms Overkill.

8

scrollTo

window.scrollTo(0, 0); 

ist die ultimative Lösung, die Fenster nach oben zum Blättern - der beste Teil ist, dass es keinen id-Selektor benötigt und selbst wenn wir die IFRAME-Struktur verwenden wird es funktioniert extrem Gut.

Die Methode scrollTo() scrollt das Dokument an die angegebenen Koordinaten.
window.scrollTo (xpos, ypos);
xpos Nummer erforderlich. Die zu scrollende Koordinate entlang der x-Achse (horizontal) in Pixeln
ypos Nummer Erforderlich. Die Koordinate entlang der y-Achse (vertikal) zu bewegen, in Pixel

jQuery

Eine weitere Möglichkeit, das gleiche zu tun, ist mit jQuery und es wird ein glatteres Aussehen für die gleiche

geben
$('html,body').animate({scrollTop: 0}, 100); 

wobei 0 nach dem scrollTop die Position der vertikalen Bildlaufleiste im Pixel angibt und der zweite Parameter ein optionaler Parameter ist, der die Zeit in Mikrosekunden angibt, um die Aufgabe abzuschließen.

5

Für diejenigen, die immer noch nicht arbeiten können, stellen Sie sicher, dass das übergelaufene Element angezeigt wird, bevor Sie die jQuery-Funktion verwenden.

Exemple:

$('#elem').show(); 
$('#elem').scrollTop(0); 
+0

Lebensretter! Begann den Willen zu leben zu verlieren mit scrollTop funktioniert nicht! musste meinen scrollTop call in eine setTimeout Funktion setzen. –

1

Wenn der HTML-Inhalt Überlauf ein einzelne Ansichtsfenster, das nur mit Hilfe von Javascript für mich gearbeitet:

document.getElementsByTagName('body')[0].scrollTop = 0; 

Grüße,

0

für mich Dies funktioniert:

document.getElementById('yourDivID').scrollIntoView(); 
0

Wenn Sie mit einem fließenden Übergang blättern möchten, könnten Sie dies verwenden!

(Vanilla JS)

const tabScroll = document.getElementById("tabScroll"); 
window.scrollTo({ 
    'behavior': 'smooth', 
    'left': 0, 
    'top': tabScroll.offsetTop - 80 
}); 

Wenn Ihre Zielgruppe sind Chrome und Firefox, dann ist dieses gut! Aber leider wird diese Methode nicht gut genug auf allen Browsern unterstützt. Check Here

Hoffe, das hilft !!