web-dev-qa-db-fra.com

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

J'ai un div sur ma page:

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

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

jqueryhtml
216
DobotJr

Les autres solutions ici ne fonctionnent pas réellement pour les divs avec beaucoup de contenu - cela "maxes" défiler jusqu'à la hauteur de la div (au lieu de la hauteur de la conten de la div). Ainsi, ils fonctionneront, à moins que vous n'ayez plus du double de la hauteur du contenu de la div à l'intérieur.

Voici la version correcte:

$('#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);
553
Mike Todd

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

scrollTop = scrollHeight

Considérant 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);
47
patspam

UPDATE: voir 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ément.

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

Ceci saisit la hauteur de la page et la fait défiler une fois la fenêtre chargée. Changez le 1000 en tout ce dont vous avez besoin pour le faire plus vite/plus lentement une fois la page prête.

15
Chords

essaye ça:

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

Faites défiler la fenêtre jusqu'au bas de la div 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');
5
jenking

pour animate in jquery (version> 2.0)

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

Ce qui suit fonctionnera. Veuillez noter [0] et scrollHeight

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

Rien de tout cela n'a fonctionné 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;
}
3
James Blachford

Je travaille dans une ancienne base de code essayant de migrer vers Vue.

Dans ma situation particulière (div scrollable enveloppé dans un modal bootstrap), un v-if a montré un nouveau contenu, ce que je voulais que la page fasse défiler vers le bas. Pour que ce comportement fonctionne, je devais attendre que vue finisse de rendre le rendu, puis utiliser jQuery pour faire défiler jusqu'au bas du modal.

Alors...

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

Vous pouvez vérifier scrollHeight et clientHeight avec scrollTop pour faire défiler jusqu'au bas de div, comme le code 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");
  }
  
});
0
Nghi

Vous pouvez utiliser le code ci-dessous pour faire défiler la page jusqu'au bas de la page.

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