Gulir kembali ke bagian atas div yang dapat digulir

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

Bagaimana cara mengatur ulang posisi gulir kembali ke atas div kontainer di lain waktu?

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

Lihat scrollTopatributnya.

Cara lain untuk melakukannya dengan animasi yang halus adalah seperti ini

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

Saya mencoba jawaban yang ada untuk pertanyaan ini, dan tidak ada yang berfungsi di Chrome untuk saya. Apa yang berhasil sedikit berbeda:

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

scrollTo

window.scrollTo(0, 0);

adalah solusi pamungkas untuk menggulir jendela ke atas - bagian terbaiknya adalah tidak memerlukan pemilih id dan bahkan jika kita menggunakan struktur IFRAME itu akan bekerja dengan sangat baik.

Metode scrollTo () menggulung dokumen ke koordinat yang ditentukan.
window.scrollTo (xpos, ypos);
xpos Nomor Diperlukan. Koordinat untuk menggulir, sepanjang sumbu x (horizontal), dalam piksel
ypos Jumlah Diperlukan. Koordinat tujuan scroll, sepanjang sumbu y (vertikal), dalam piksel

jQuery

Opsi lain untuk melakukan hal yang sama adalah menggunakan jQuery dan ini akan memberikan tampilan yang lebih mulus

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

di mana 0 setelah scrollTop menentukan posisi scrollbar vertikal dalam piksel dan parameter kedua adalah parameter opsional yang menunjukkan waktu dalam mikrodetik untuk menyelesaikan tugas.

Ini berhasil untuk saya:

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

Bagi mereka yang masih tidak bisa membuat ini berfungsi, pastikan elemen overflow ditampilkan sebelum menggunakan fungsi jQuery .

Contoh:

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

Bagi saya cara scrollTop tidak berfungsi, tetapi saya menemukan yang lain:

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

Namun, tidak memeriksa waktu minimum untuk rendering css yang andal, 100ms mungkin berlebihan.

Jika Anda ingin menggulir dengan transisi yang mulus, Anda dapat menggunakan ini!

(Vanilla JS)

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

Jika target pengguna Anda adalah Chrome dan Firefox , maka ini bagus! Namun sayangnya metode ini tidak didukung dengan cukup baik di semua browser. Cek Disini

Semoga ini membantu!!

Sesuai jawaban François Noël "Bagi mereka yang masih tidak dapat membuat ini berfungsi, pastikan bahwa elemen overflow ditampilkan sebelum menggunakan fungsi jQuery."

Saya telah bekerja dalam modal bootstrap yang berulang kali saya kemukakan dengan izin akun di div yang meluap pada dimensi y. Masalah saya adalah, saya mencoba menggunakan fungsi jquery .scrollTop (0) dan itu tidak akan berhasil tidak peduli bagaimana saya mencoba melakukannya. Saya harus menyiapkan acara untuk modal yang tidak mengatur ulang scrollbar sampai modal berhenti beranimasi. Kode yang akhirnya berhasil untuk saya ada di sini:

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

Jika konten html melebihi satu area pandang, ini berfungsi untuk saya hanya menggunakan javascript:

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

Salam,

Ini adalah satu-satunya cara untuk saya, dengan transisi scrolling yang mulus:

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

Saat mendapatkan elemen dengan nama kelas, jangan lupa nilai yang dikembalikan adalah array; Karenanya kode ini:

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

Tidak akan berhasil. Gunakan kode di bawah ini sebagai gantinya.

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

Saya pikir orang lain mungkin menghadapi masalah yang sama seperti saya; jadi ini seharusnya berhasil.

kedua kode ini bekerja untuk saya seperti pesona yang pertama ini akan menggulir ke bagian atas halaman tetapi jika Anda ingin menggulir ke beberapa div tertentu gunakan yang kedua dengan id div Anda.

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

Jika Anda ingin menggulir ke dengan nama kelas gunakan kode di bawah ini

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

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

ID Harus memiliki id dari div terkait yang memiliki properti overflow css.

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