Scrollen Sie zurück zum Anfang des scrollbaren Div

121
<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 setze ich die Bildlaufposition beim nächsten Mal wieder auf die Oberseite des Container-Div zurück?

Ich bin da
quelle

Antworten:

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

Siehe das scrollTopAttribut.

Phrogz
quelle
Versucht, aber es hat nicht funktioniert. Wenn ein variabler Längentext in den Container div geladen wird und in die Mitte schaut, und dann zum neuen variablen Längentext wischt, wird er im Container angezeigt, aber wir werden nicht oben darauf schauen, er wird bereits gescrollt ein bisschen runter.
Imhere
2
@ s12345 Sie sollten einen reproduzierbaren Testfall erstellen, der uns Ihr Problem zeigt (z. B. auf jsfiddle.net ) und angeben, auf welchem ​​Betriebssystem / Browser / welcher Version dies auftritt .
Phrogz
2
Entschuldigung mein Fehler .. es funktioniert! Wurde mit zwei ähnlichen Divs verwechselt.
Imhere
63

Eine andere Möglichkeit, dies mit einer reibungslosen Animation zu tun, ist folgende

$("#containerDiv").animate({ scrollTop: 0 }, "fast");
Mahmoud Ibrahim
quelle
7
Funktioniert gut, aber bitte nicht verwenden slow, es ist so ... langsam!
Pascal
1
Anstatt slowals zweites Argument zu übergeben. Sie können eine Ganzzahl übergeben, die der Anzahl der Millisekunden entspricht, die die Animation ausführen soll.
Sushant Gupta
2
Änderte es zu schnell :)
Mahmoud Ibrahim
1
Beste Antwort! Vielen Dank!
YogaPanda
1
Dies funktioniert gut, wenn Sie jquery verwenden. Wenn Sie ein eckiges Typoskript (einfaches Javascript) verwenden, funktioniert dies nicht. Wie können Sie dies mit einfachem Javascript erreichen?
Babulaas
27

Ich habe die vorhandenen Antworten auf diese Frage ausprobiert und keine davon hat für mich in Chrome funktioniert. Was funktionierte, war etwas anders:

$('body, html, #containerDiv').scrollTop(0);
Sunnyside Productions
quelle
16

scrollTo

window.scrollTo(0, 0);

ist die ultimative Lösung, um die Fenster nach oben zu scrollen - das Beste daran ist, dass kein ID-Selektor erforderlich ist und selbst wenn wir die IFRAME-Struktur verwenden, funktioniert sie sehr gut.

Die Methode scrollTo () scrollt das Dokument zu den angegebenen Koordinaten.
window.scrollTo (xpos, ypos);
xpos Nummer erforderlich. Die Koordinate, zu der entlang der x-Achse (horizontal) in Pixel
gescrollt werden soll. Ypos Anzahl erforderlich. Die Koordinate, zu der entlang der y-Achse (vertikal) in Pixel gescrollt werden soll

jQuery

Eine andere Möglichkeit, dasselbe zu tun, ist die Verwendung von jQuery, wodurch ein gleichmäßigeres Erscheinungsbild erzielt wird

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

Dabei gibt 0 nach dem scrollTop die vertikale Bildlaufleistenposition im Pixel an und der zweite Parameter ist ein optionaler Parameter, der die Zeit in Mikrosekunden anzeigt, um die Aufgabe abzuschließen.

Gaurav Tiwari
quelle
1
Was ist, wenn wir nur ein internes Div nach oben scrollen möchten? Dies wird letztendlich nicht funktionieren.
John Lord
1
Elemente haben auch die .scrollTo-Methode, die Sie document.getElementById('scroller').scrollTo(0,0)
ausführen
15

Das hat bei mir funktioniert:

document.getElementById('yourDivID').scrollIntoView();
Rajat
quelle
Dies ist meine bevorzugte Lösung. document.getElementById("yourDivID").scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})
Chris
Beachten scollIntoViewSie außerdem, dass dies nur funktioniert, wenn Sie es für das Element aufrufen, das gescrollt werden soll. Mit anderen Worten, nennen Sie es nicht auf dem Element , das Sie blättern möchten zu , rufen Sie es auf dem Element , das Sie bewegen möchten.
Chris
9

Stellen Sie für diejenigen, die diese Funktion immer noch nicht ausführen können, sicher, dass das übergelaufene Element angezeigt wird, bevor Sie die jQuery-Funktion verwenden .

Beispiel:

$('#elem').show();
$('#elem').scrollTop(0);
François Noël
quelle
1
Lebensretter! Begann den Willen zu verlieren, mit scrollTop zu leben, funktionierte nicht! musste meinen scrollTop-Aufruf in eine setTimeout-Funktion setzen.
AVFC_Bubble88
Ich fühle mich gleich! Ich habe in einem modalen Bootstrap-Dialogfeld gearbeitet. Ich musste ein Ereignis für das Modal einrichten, das die Bildlaufleiste nicht zurücksetzte, bis das Modal die Animation beendet hatte. Dies ist der Code, den ich verwendet habe: $ ('# add_modal'). On ('gezeigt.bs.modal', Funktion (e) {$ ('div.border'). ScrollTop (0);});
Irv Lennert
2

Für mich hat der scrollTop-Weg nicht funktioniert, aber ich habe andere gefunden:

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

Die Mindestzeit für ein zuverlässiges CSS-Rendering wurde jedoch nicht überprüft. 100 ms könnten zu viel sein.

AlexTR
quelle
2

Wenn Sie mit einem reibungslosen Übergang scrollen möchten, können Sie dies verwenden!

(Vanilla JS)

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

Wenn Ihre Zielbenutzer Chrome und Firefox sind , ist dies gut! Leider wird diese Methode nicht in allen Browsern ausreichend unterstützt. Überprüfe hier

Hoffe das hilft!!

Ashwin
quelle
2

Laut der Antwort von François Noël "Stellen Sie für diejenigen, die diese Funktion immer noch nicht ausführen können, sicher, dass das übergelaufene Element angezeigt wird, bevor Sie die jQuery-Funktion verwenden."

Ich habe in einem Bootstrap-Modal gearbeitet, das ich wiederholt mit Kontoberechtigungen in einem Div aufrufe, der in der y-Dimension überläuft. Mein Problem war, ich habe versucht, die Funktion jquery .scrollTop (0) zu verwenden, und es würde nicht funktionieren, egal wie ich es versucht habe. Ich musste ein Ereignis für das Modal einrichten, das die Bildlaufleiste nicht zurücksetzte, bis das Modal die Animation beendet hatte. Der Code, der endlich für mich funktioniert hat, ist hier:

    $('#add-modal').on('shown.bs.modal', function (e) {
        $('div.border').scrollTop(0);
    });
Irv Lennert
quelle
1

Wenn der HTML-Inhalt ein einzelnes Ansichtsfenster überläuft, funktioniert dies bei mir nur mit Javascript:

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

Grüße,

Ruben
quelle
1

Dies ist die einzige Möglichkeit, wie es bei mir funktioniert hat, mit einem reibungslosen Bildlaufübergang:

  $('html, body').animate({
    scrollTop: $('#containerDiv').offset().top,
  }, 250);
Fred K.
quelle
1

Vergessen Sie beim Abrufen des Elements nach Klassennamen nicht, dass der Rückgabewert ein Array ist. Daher dieser Code:

document.getElementByClassName("dropdown-menu").scrollTop = 0

Würde nicht funktionieren. Verwenden Sie stattdessen den folgenden Code.

document.getElementByClassName("dropdown-menu")[0].scrollTop = 0

Ich dachte, andere Leute könnten auf ein ähnliches Problem stoßen wie ich; Das sollte also den Trick machen.

Mahsan Nourani
quelle
0

Diese beiden Codes haben für mich wie ein Zauber funktioniert, den der erste benötigt, um zum Anfang der Seite zu scrollen. Wenn Sie jedoch zu einem bestimmten Div scrollen möchten, verwenden Sie den zweiten mit Ihrer Div-ID.

$('body, html, #containerDiv').scrollTop(0);
document.getElementById('yourDivID').scrollIntoView();

Wenn Sie nach einem Klassennamen blättern möchten, verwenden Sie den folgenden Code

var $container = $("html,body");
var $scrollTo = $('.main-content');

$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300);
Amir shah
quelle
0

Die ID sollte die ID des entsprechenden Div haben, der die Überlauf-CSS-Eigenschaft hat.

document.querySelector('#YOUR_OVERFLOWED_DIV').scrollTop = 0;

csandreas1
quelle