Faites défiler vers le bas de Div lors du chargement de la page (jQuery)

J'ai une div sur ma page:

<div id='div1' style='overflow:scroll;overflow-x:hidden;max-height:200px;'></div>

Comment puis-je faire défiler le div vers le bas du div ?? Pas la page, juste la DIV.

Les autres solutions ici ne fonctionnent pas réellement pour les divs avec beaucoup de contenu - elles "maximisent" en défilant jusqu'à la hauteur du div (au lieu de la hauteur du contenu du div). Ils fonctionneront donc, sauf si vous avez plus du double de la hauteur de la div en contenu.

Voici la bonne version:

$('#div1').scrollTop($('#div1')[0].scrollHeight);

ou version jQuery 1.6+:

var d = $('#div1');
d.scrollTop(d.prop("scrollHeight"));

Ou animé:

$("#div1").animate({ scrollTop: $('#div1').prop("scrollHeight")}, 1000);

Toutes les réponses que je peux voir ici, y compris celle actuellement "acceptée", sont en fait erronées dans la mesure où elles définissent:

scrollTop = scrollHeight

Alors que la bonne approche consiste à définir:

scrollTop = scrollHeight - clientHeight

En d'autres termes:

$('#div1').scrollTop($('#div1')[0].scrollHeight - $('#div1')[0].clientHeight);

Ou animé:

$("#div1").animate({
  scrollTop: $('#div1')[0].scrollHeight - $('#div1')[0].clientHeight
}, 1000);

MISE À JOUR: voir la solution de Mike Todd pour une réponse complète.

$("#div1").animate({ scrollTop: $('#div1').height()}, 1000);

si vous souhaitez l'animer (plus de 1000 millisecondes).

$('#div1').scrollTop($('#div1').height())

si vous le voulez instantané.

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

Cela saisit la hauteur de la page et la fait défiler vers le bas une fois la fenêtre chargée. Remplacez le 1000par tout ce dont vous avez besoin pour le faire plus rapidement / plus lentement une fois que la page est prête.

essaye ça:

$('#div1').scrollTop( $('#div1').height() )

Faites défiler la fenêtre vers le bas de la division cible.

function scrollToBottom(id){
  div_height = $("#"+id).height();
  div_offset = $("#"+id).offset().top;
  window_height = $(window).height();
  $('html,body').animate({
    scrollTop: div_offset-window_height+div_height
  },'slow');
}

scrollToBottom('call_div_id');

Ce qui suit fonctionnera. Veuillez noter [0]etscrollHeight

$("#myDiv").animate({ scrollTop: $("#myDiv")[0].scrollHeight }, 1000);

pour animer en jquery (version> 2.0)

var d = $('#div1');
d.animate({ scrollTop: d.prop('scrollHeight') }, 1000);

Rien de tout cela ne fonctionnait pour moi, j'ai un système de messagerie dans une application Web similaire à Facebook Messenger et je voulais que les messages apparaissent au bas d'une div.

Cela a fonctionné un régal, Javascript de base.

window.onload=function () {
     var objDiv = document.getElementById("MyDivElement");
     objDiv.scrollTop = objDiv.scrollHeight;
}

Je travaille dans une base de code héritée essayant de migrer vers Vue.

Dans ma situation spécifique (div scrollable enveloppé dans un modal bootstrap), un v-if montrait du nouveau contenu, que je voulais faire défiler vers le bas. Pour que ce comportement fonctionne, j'ai dû attendre que vue termine le re-rendu, puis utiliser jQuery pour faire défiler vers le bas du modal.

Alors...

this.$nextTick(function() {
    $('#thing')[0].scrollTop = $('#thing')[0].scrollHeight;
})

Vous pouvez utiliser le code ci-dessous pour faire défiler vers le bas de div lors du chargement de la page.

$(document).ready(function(){
  $('div').scrollTop($('div').scrollHeight);
});

Vous pouvez vérifier scrollHeight et clientHeight avec scrollTop pour faire défiler vers le bas du code de type div ci-dessous.

$('#div').scroll(function (event) {
  if ((parseInt($('#div')[0].scrollHeight) - parseInt(this.clientHeight)) == parseInt($('#div').scrollTop())) 
  {
    console.log("this is scroll bottom of div");
  }
  
});

Lorsque la page est chargée, le défilement est la valeur maximale.

Il s'agit de la boîte de message lorsque l'utilisateur envoie un message, puis affiche toujours la dernière conversation en bas afin que la valeur de défilement soit toujours maximale.

$('#message').scrollTop($('#message')[0].scrollHeight);

voir l'image