Scrollen Sie zurück zum Anfang des scrollbaren Div

<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?

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

Siehe das scrollTopAttribut.

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

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

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);

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.

Das hat bei mir funktioniert:

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

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);

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.

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!!

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);
    });

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

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

Grüße,

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);

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.

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);

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

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