web-dev-qa-db-fra.com

Revenir en haut de la page

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

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

Voir l'attribut scrollTop .

142
Phrogz

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

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

J'ai essayé les réponses existantes à cette question, et aucune d'entre elles n'a fonctionné sous Chrome pour moi. Qu'est-ce que le travail était légèrement différent:

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

scrollTo 

window.scrollTo(0, 0);

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

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

jQuery

Une autre option consiste à utiliser jQuery pour obtenir le même résultat.

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

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

14
Gaurav Tiwari

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

Exemple:

$('#elem').show();
$('#elem').scrollTop(0);
7
François Noël

Cela a fonctionné pour moi:

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

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 pourrait être excessif.

2
AlexTR

Si le contenu HTML déborde d'une fenêtre d'affichage unique, cela fonctionne pour moi en utilisant uniquement du javascript:

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

Cordialement,

1
Ruben

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

(Vanilla JS)

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

Si vos utilisateurs cibles sont Chrome et Firefox, il s'agit alors de bien! Mais malheureusement, cette méthode n’est pas assez bien supportée sur tous les navigateurs. Vérifier ici

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

0
Ashwin

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

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

Lorsque vous obtenez 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

Cela ne marcherait pas. Utilisez le code ci-dessous à la place.

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

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

0
Mahsan Nourani

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

Je travaillais dans un modal bootstrap que je mentionne à plusieurs reprises avec des autorisations de compte dans une div qui déborde sur la dimension y. Mon problème était, j'essayais d'utiliser la fonction jquery .scrollTop (0) et cela ne fonctionnerait pas, peu importe comment j'essayais de le faire. Je devais 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é d'animer. Le code qui a finalement fonctionné pour moi est ici:

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

ces deux codes ont fonctionné pour moi comme un charme Ce premier point consiste à faire défiler vers le haut de la page, mais si vous souhaitez 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 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);
0
Amir shah