Comment faire pour défiler automatiquement jusqu'à la fin de div lorsque les données sont ajoutées?

J'ai une table intérieur d'un div avec le style suivant:

 #data { overflow-x:hidden; overflow-y:visible; height:500px; }

Cela affiche une barre de défilement verticale une fois que de nombreuses données sont ajoutées à la table. Cependant, lorsque de nouvelles données sont ajoutées, j'aimerais que l'élément div déplace automatiquement vers le bas.

Quel code JavaScript dois-je utiliser pour le faire? Je suis ouvert aux options dans JQuery si nécessaire mais préfère une solution JavaScript.

Si vous ne savez pas quand les données seront ajoutées à #data , vous pouvez définir un intervalle pour mettre à jour le scrollTop de l'élément à son scrollHeight toutes les deux secondes. Si vous contrôlez lorsque des données sont ajoutées, appelez simplement l'interne de la fonction suivante une fois que les données ont été ajoutées.

 window.setInterval(function() { var elem = document.getElementById('data'); elem.scrollTop = elem.scrollHeight; }, 5000);

 var objDiv = document.getElementById("divExample"); objDiv.scrollTop = objDiv.scrollHeight;

Que diriez-vous d'ajouter une ancre au bas de la table, puis de changer la fenêtre.location.habitude sur le nom de cette ancre après chaque mise à jour de données?

Vous devrez peut-être changer le hash à autre chose, puis revenir à cette ancre pour provoquer réellement le navigateur pour déplacer le défilement.

EDIT: Je ne suis pas sûr que ce soit votre intention. Cette réponse fera défiler toute la fenêtre au bas de la div. Si vous voulez dire que le div lui-même dispose d'une barre de défilement que vous souhaitez déplacer, essayez l'une des autres réponses (peut-être celle de Valamas) ou mettez l'ancre à l'intérieur du div au bas de celle-ci.