Przewiń z powrotem na górę przewijalnego elementu 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;

Jak następnym razem zresetować pozycję przewijania do góry kontenera div?

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

Zobacz scrollTopatrybut.

Innym sposobem na zrobienie tego z płynną animacją jest ten

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

Wypróbowałem istniejące odpowiedzi na to pytanie i żadna z nich nie działała dla mnie w Chrome. To, co zadziałało, było nieco inne:

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

scrollTo

window.scrollTo(0, 0);

to najlepsze rozwiązanie do przewijania okien do góry - najlepsze jest to, że nie wymaga żadnego selektora identyfikatora i nawet jeśli użyjemy struktury IFRAME, będzie działać wyjątkowo dobrze.

Metoda scrollTo () przewija dokument do określonych współrzędnych.
window.scrollTo (xpos, ypos);
Wymagana liczba xpos. Współrzędna do przewinięcia wzdłuż osi X (poziomej) w pikselach
ypos Liczba wymagana. Współrzędna do przewinięcia wzdłuż osi Y (w pionie) w pikselach

jQuery

Inną opcją, aby zrobić to samo, jest użycie jQuery, które zapewni gładszy wygląd tego samego

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

gdzie 0 za scrollTop określa położenie pionowego paska przewijania w pikselu, a drugi parametr jest parametrem opcjonalnym, który pokazuje czas w mikrosekundach potrzebny do wykonania zadania.

To zadziałało dla mnie:

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

Dla tych, którzy nadal nie mogą tego zrobić, upewnij się, że przepełniony element jest wyświetlany przed użyciem funkcji jQuery .

Przykład:

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

U mnie sposób scrollTop nie działał, ale znalazłem inne:

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

Nie sprawdziłem jednak minimalnego czasu niezawodnego renderowania css, 100 ms może być przesadą.

Jeśli chcesz przewijać z płynnym przejściem, możesz tego użyć!

(Wanilia JS)

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

Jeśli docelowymi użytkownikami są Chrome i Firefox , to dobrze! Ale niestety ta metoda nie jest wystarczająco dobrze obsługiwana we wszystkich przeglądarkach. Sprawdź tutaj

Mam nadzieję że to pomoże!!

Zgodnie z odpowiedzią François Noël „Dla tych, którzy nadal nie mogą tego zrobić, upewnij się, że przepełniony element jest wyświetlany przed użyciem funkcji jQuery”.

Pracowałem w trybie bootstrap, który wielokrotnie wywoływałem z uprawnieniami konta w elemencie div, który przepełnia wymiar y. Mój problem polegał na tym, że próbowałem użyć funkcji jquery .scrollTop (0) i nie działała ona bez względu na sposób, w jaki próbowałem to zrobić. Musiałem ustawić zdarzenie dla modalu, które nie resetowało paska przewijania, dopóki modal nie przestał się animować. Kod, który w końcu dla mnie zadziałał, jest tutaj:

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

Jeśli zawartość html przepełnia jeden widok, działało to dla mnie tylko przy użyciu javascript:

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

Pozdrowienia,

To jedyny sposób, w jaki to zadziałało, z płynnym przejściem przewijania:

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

Podczas pobierania elementu przez nazwę klasy nie zapomnij, że zwracana wartość jest tablicą; Stąd ten kod:

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

Nie zadziała. Zamiast tego użyj poniższego kodu.

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

Pomyślałem, że inni ludzie mogą napotkać podobny problem jak ja; więc to powinno załatwić sprawę.

te dwa kody działały dla mnie jak urok, który pierwszy przewinie na górę strony, ale jeśli chcesz przewinąć do jakiegoś konkretnego div, użyj drugiego z identyfikatorem div.

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

Jeśli chcesz przewijać według nazwy klasy, użyj poniższego kodu

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

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

Identyfikator Powinien mieć identyfikator odpowiedniego elementu div, który ma właściwość css przepełnienia.

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