Défilement vers le bas du Div au chargement de la page (jQuery)

Question

J'ai un div sur ma page :

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

Comment faire en sorte que la div défile jusqu'au bas de la div ? Pas la page, juste la division.

Answer 1

Les autres solutions proposées ici ne fonctionnent pas vraiment pour les divs avec beaucoup de contenu -- le défilement est "plafonné" à la hauteur de la div (au lieu de la hauteur de l'image). contenu de la div). Ils fonctionneront donc, à moins que le contenu de la div ne fasse plus du double de sa hauteur.

Voici la version correcte :

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

ou la version 1.6+ de jQuery :

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

Ou animée :

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

Answer 2

Toutes les réponses que je peux voir ici, y compris celle qui est actuellement "acceptée", sont en fait erronées en ce qu'elles fixent :

scrollTop = scrollHeight

Alors que l'approche correcte est de fixer :

scrollTop = scrollHeight - clientHeight

En d'autres termes :

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

Ou animée :

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

Answer 3

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

---

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

si vous voulez qu'il soit animé (plus de 1000 millisecondes).

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

si vous voulez que ce soit instantané.

Answer 4

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

Cela permet de saisir la hauteur de la page et de la faire défiler vers le bas une fois la fenêtre chargée. Changez le 1000 à ce dont vous avez besoin pour le faire plus vite/plus lentement une fois que la page est prête.

Answer 5

Faire défiler la fenêtre jusqu'au 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');