Revenir en haut de la div déroulante

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

Comment réinitialiser la position de défilement vers le haut du conteneur div la prochaine fois?

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

Voir l' scrollTopattribut.

Une autre façon de le faire avec une animation fluide est comme ça

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

J'ai essayé les réponses existantes à cette question, et aucune d'elles n'a fonctionné sur Chrome pour moi. Ce qui fonctionnait était légèrement différent:

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

scrollTo

window.scrollTo(0, 0);

est la solution ultime pour faire défiler les fenêtres vers le haut - la meilleure partie est qu'il ne nécessite aucun sélecteur d'identifiant et même si nous utilisons la structure IFRAME, cela fonctionnera extrêmement bien.

La méthode scrollTo () fait défiler le document jusqu'aux coordonnées spécifiées.
window.scrollTo (xpos, ypos);
xpos Numéro requis. Coordonnée vers laquelle faire défiler, le long de l'axe des x (horizontal), en pixels
ypos Nombre requis. La coordonnée vers laquelle faire défiler, le long de l'axe y (vertical), en pixels

jQuery

Une autre option pour faire la même chose est d'utiliser jQuery et cela donnera un aspect plus lisse pour le même

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

où 0 après scrollTop spécifie la position de la barre de défilement verticale dans le pixel et le second paramètre est un paramètre facultatif qui indique le temps en microsecondes pour terminer la tâche.

Cela a fonctionné pour moi:

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

Pour ceux qui ne peuvent toujours pas faire fonctionner cela, assurez-vous que l'élément débordé est affiché avant d'utiliser la fonction jQuery .

Exemple:

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

Pour moi, la méthode scrollTop ne fonctionnait pas, mais j'en ai trouvé d'autres:

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

N'a pas vérifié le temps minimum pour un rendu css fiable, 100 ms pourraient être excessifs.

Si vous souhaitez faire défiler avec une transition en douceur, vous pouvez l'utiliser!

(Vanille JS)

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

Si vos utilisateurs cibles sont Chrome et Firefox , c'est bien! Mais malheureusement, cette méthode n'est pas suffisamment prise en charge sur tous les navigateurs. Vérifiez ici

J'espère que cela t'aides!!

Selon la réponse de François Noël "Pour ceux qui ne peuvent toujours pas faire ce travail, assurez-vous que l'élément débordé est affiché avant d'utiliser la fonction jQuery."

J'avais travaillé dans un modal bootstrap que j'évoquais à plusieurs reprises avec des autorisations de compte dans un div qui déborde sur la dimension y. Mon problème était que j'essayais d'utiliser la fonction jquery .scrollTop (0) et cela ne fonctionnerait pas, peu importe comment j'essayais de le faire. J'ai dû configurer un événement pour le modal qui n'a pas réinitialisé la barre de défilement jusqu'à ce que le modal ait cessé de s'animer. Le code qui a finalement fonctionné pour moi est ici:

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

Si le contenu html déborde d'une seule fenêtre, cela a fonctionné pour moi en utilisant uniquement javascript:

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

Cordialement,

C'est la seule façon dont cela a fonctionné pour moi, avec une transition de défilement fluide:

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

Lors de l'obtention d'un élément par nom de classe, n'oubliez pas que la valeur de retour est un tableau; D'où ce code:

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

Ça ne marcherait pas. Utilisez plutôt le code ci-dessous.

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

J'ai pensé que d'autres personnes pourraient rencontrer un problème similaire à moi; donc cela devrait faire l'affaire.

ces deux codes ont fonctionné pour moi comme un charme, il faudra d'abord faire défiler vers le haut de la page, mais si vous voulez faire défiler jusqu'à un div spécifique, utilisez le second avec votre identifiant div.

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

Si vous voulez faire défiler jusqu'à par un nom de classe, utilisez le code ci-dessous

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

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

L'ID doit avoir l'id du div correspondant qui a la propriété css de débordement.

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