jQuery Scroll en bas de page/iframe

Comment faire pour utiliser jquery pour faire défiler vers le bas d'une iframe ou une page?

InformationsquelleAutor Adam | 2009-12-11

345

Si vous voulez une belle ralentir l'animation de défilement, pour tout ancre avec href="#bottom" ce défilement de vous vers le bas:
```
$("a[href='#bottom']").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  return false;
});
```
N'hésitez pas à changer le sélecteur.
- Cela fonctionne dans Firefox 3.5.7 mais pas dans Chrome 4.0.295.0. Les travaux suivants dans google Chrome: $('html, body').animate({scrollTop: $(document).hauteur()}, 'slow');
- Je ne peux pas repérer la différence entre votre solution et Marc !
- cochez la case modifier la date. Il semble Marquer mis à jour sa réponse à inclure Tom fixer.
- Il y a en fait pas besoin d'obtenir de l'élément taille: stackoverflow.com/a/44578849/1450294
InformationsquelleAutor Mark Ursino
207

scrollTop() retourne le nombre de pixels qui sont cachés de la vue à partir de la zone déroulante, afin de le donner:
```
$(document).height()
```
sera effectivement le dépassement bas de la page. Pour les faire défiler en fait "stop" au bas de la page, la hauteur de la fenêtre du navigateur besoins de la soustraction. Cela permettra l'utilisation de faciliter, si nécessaire, de sorte qu'il devient:
```
$('html, body').animate({ 
   scrollTop: $(document).height()-$(window).height()}, 
   1400, 
   "easeOutQuint"
);
```
- Ce doit être la accepté de répondre, Tom est absolument droit, de la accepté de répondre ne fonctionne pas bien que le parchemin est brusquement arrêter, au lieu de traiter la fin de la baisse.
- Remarque: easeOutQuint nécessite un plugin jQuery lui-même, n'a linear et swing.
- mec c'est du bon matos! merci. même le faire avec "swing" au lieu de "easeoutquint" montre des différences notables'.
- Vous ne savez pas si il est mal vu, mais j'ai édité accepté de répondre à ajouter un pointeur vers le bas pour cette réponse. Si c'est le cas, quelqu'un peut revenir.
- Cette solution ne fonctionne que si la page est interprété dans une norme de conformité du mode. Par exemple, si vous n'incluez pas le <!DOCTYPE html> sur Chrome, Chrome sera de retour exactement la même valeur pour la fenêtre de document et de la hauteur, auquel cas $(document).height()-$(window).height() retourne toujours 0. Voir ici: stackoverflow.com/questions/12103208/...
- Quel navigateur utilisez-vous? Dans chaque navigateur, j'ai essayé, la fourniture d'un nombre plus grand que la hauteur de la juste défile vers le bas, donc il n'y a pas besoin de faire tout ce que les maths: stackoverflow.com/a/44578849/1450294
InformationsquelleAutor Tom Bates
33

Par exemple:
```
$('html, body').scrollTop($(document).height());
```
- Je n'arrive pas à obtenir que cela fonctionne. Ne rien faire du tout.
- Quelle est la version de jQuery utilisez-vous?
- J'utilise la dernière, 1.3.2
- Cela ne fonctionnera pas. Utiliser "html, body" à la place.
InformationsquelleAutor Tatu Ulmanen
14

Après ce fil ne fonctionne pas pour moi, pour mon besoin spécifique (défilement à l'intérieur d'un élément particulier, dans mon cas, un textarea) j'ai trouvé ceci dans l'au-delà, ce qui pourrait s'avérer utile à quelqu'un d'autre lecture de cette discussion:

Alternative sur planetcloud

Puisque j'avais déjà une version mise en cache de mon objet jQuery (la myPanel dans le code ci-dessous est l'objet jQuery), le code que j'ai ajouté à mon gestionnaire d'événement est simplement ceci:
```
myPanel.scrollTop(myPanel[0].scrollHeight - myPanel.height());
```
(merci Ben)
- A fonctionné pour moi avec un div: var d = $('#mydiv'); d.scrollTop (d[0].scrollHeight - d.height ());
- Avez-vous fait faire des maths? stackoverflow.com/a/44578849/1450294
InformationsquelleAutor Greg Pettit
4

Une fonction simple qui saute (instantanément manuscrits) au bas de la page entière. Il utilise le haut -.scrollTop(). Je n'ai pas essayé d'adapter ce de travailler avec chacun des éléments de la page.
```
function jumpToPageBottom() {
    $('html, body').scrollTop( $(document).height() - $(window).height() );
}
```
- Je ne sais pas pourquoi, mais cela n'a pas fonctionné pour moi sur Firefox 26.0, et faire défiler vers le haut lorsque cette fonction a été exécutée. Ce problème a été résolu en disant $(document).scrollTop($(document).height());
InformationsquelleAutor Rory O'Kane

Cette une a fonctionné pour moi:

var elem = $('#box');
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
  //We're at the bottom.
}

Ceci ne répond pas à la question

InformationsquelleAutor MountainRock

2

Si vous ne vous inquiétez pas au sujet de l'animation, alors vous n'avez pas à obtenir la hauteur de l'élément. Au moins dans tous les navigateurs, j'ai essayé, si vous donnez scrollTop un nombre qui est plus grand que le maximum, il vous suffit de faire défiler vers le bas. Afin de lui donner le plus grand nombre possible:
```
$(myScrollingElement).scrollTop(Number.MAX_SAFE_INTEGER);
```
Si vous voulez faire défiler la page, plutôt que d'un élément avec une barre de défilement, il suffit de faire myScrollingElement égal à 'corps, html.

Car j'ai besoin de faire cela en plusieurs endroits, j'ai écrit un rapide et sale de fonction jQuery pour la rendre plus pratique, comme ceci:
```
(function($) {
  $.fn.scrollToBottom = function() {
    return this.each(function (i, element) {
      $(element).scrollTop(Number.MAX_SAFE_INTEGER);
    });
  };
}(jQuery));
```
Donc je peux le faire quand je ajouter un buncho " trucs:
```
$(myScrollingElement).append(lotsOfHtml).scrollToBottom();
```
InformationsquelleAutor Michael Scheper
0

Les scripts mentionnés dans les réponses précédentes, comme:
```
$("body, html").animate({
    scrollTop: $(document).height()
}, 400)
```
ou

$(window).scrollTop($(document).height());

ne fonctionnera pas dans Chrome et sera jumpy en Safari en cas html balise dans CSS a overflow: auto; ensemble de propriétés. Il m'a fallu près d'une heure à comprendre.

InformationsquelleAutor Ilia Rostovtsev

Vous devez vous connecter pour publier un commentaire.