Kaydırılabilir div'in en üstüne geri git

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

Bir dahaki sefere kaydırma konumunu kapsayıcı div'in üstüne nasıl sıfırlayabilirim?

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

scrollTopÖzniteliğe bakın .

Sorunsuz bir animasyonla yapmanın başka bir yolu da şudur.

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

Bu soruya verilen mevcut yanıtları denedim ve hiçbiri benim için Chrome'da çalışmadı. İşe yarayan biraz farklıydı:

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

scrollTo

window.scrollTo(0, 0);

pencereleri en üste kaydırmak için nihai çözümdür - en iyi yanı, herhangi bir kimlik seçici gerektirmemesidir ve IFRAME yapısını kullansak bile son derece iyi çalışacaktır.

ScrollTo () yöntemi, belgeyi belirtilen koordinatlara kaydırır.
window.scrollTo (xpos, ypos);
xpos Numarası Gerekli. Piksel cinsinden x ekseni (yatay) boyunca kaydırılacak koordinat
ypos Sayı Gerekli. Piksel cinsinden y ekseni (dikey) boyunca kaydırılacak koordinat

jQuery

Aynı şeyi yapmak için başka bir seçenek de jQuery kullanmaktır ve aynı şey için daha yumuşak bir görünüm sağlayacaktır.

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

scrollTop'tan sonraki 0, pikseldeki dikey kaydırma çubuğu konumunu belirtir ve ikinci parametre, görevi tamamlamak için mikrosaniye cinsinden süreyi gösteren isteğe bağlı bir parametredir.

Bu benim için çalıştı:

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

Hala bunu yapamayanlar için , jQuery işlevini kullanmadan önce taşan öğenin görüntülendiğinden emin olun .

exemple:

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

Benim için scrollTop yolu işe yaramadı, ancak başka buldum:

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

Güvenilir css oluşturma için minimum süreyi kontrol etmediyseniz, 100ms aşırı olabilir.

Yumuşak bir geçişle kaydırmak istiyorsanız, bunu kullanabilirsiniz!

(Vanilya JS)

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

Hedef kullanıcılarınız Chrome ve Firefox ise , bu iyidir! Ancak maalesef bu yöntem tüm tarayıcılarda yeterince desteklenmiyor. Burayı kontrol et

Bu yardımcı olur umarım!!

François Noël'in cevabına göre "Bu işi hala yapamayanlar için, jQuery işlevini kullanmadan önce taşan öğenin görüntülendiğinden emin olun."

Y boyutunda taşan bir div'deki hesap izinleriyle defalarca gündeme getirdiğim bir önyükleme modelinde çalışıyordum. Benim sorunum jquery .scrollTop (0) işlevini kullanmaya çalışıyordum ve bunu nasıl yapmaya çalışsam da çalışmayacaktı. Modal için, modal animasyonu durdurana kadar kaydırma çubuğunu sıfırlamayan bir olay ayarlamak zorunda kaldım. Sonunda benim için çalışan kod burada:

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

Html içeriği tek bir görüntü alanından taşıyorsa, bu benim için yalnızca javascript kullanarak çalıştı:

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

Saygılarımızla,

Sorunsuz kaydırma geçişiyle benim için işe yaramasının tek yolu buydu:

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

Sınıf adına göre öğe alırken, dönüş değerinin bir dizi olduğunu unutmayın; Dolayısıyla bu kod:

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

İşe yaramaz. Bunun yerine aşağıdaki kodu kullanın.

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

Başkalarının da benim gibi benzer bir sorunla karşılaşabileceğini düşündüm; yani bu hile yapmalı.

bu iki kod benim için bir tılsım gibi çalıştı, bu ilk önce sayfanın üst kısmına kaydırmak için gerekecek, ancak belirli bir div'e gitmek isterseniz, div kimliğinizle ikincisini kullanın.

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

Bir sınıf adına göre kaydırmak istiyorsanız aşağıdaki kodu kullanın

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

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

Kimlik, taşma css özelliğine sahip karşılık gelen div kimliğine sahip olmalıdır.

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