web-dev-qa-db-fra.com

jQuery Faites défiler vers le bas de la page

Après le chargement de ma page. Je veux que jQuery fasse bien défiler la liste vers le bas de la page, en animant rapidement, pas en un clin d'œil.

Est-ce que j'ai besoin d'un plugin comme ScrollTo pour cela? ou est-ce construit dans jQuery certains comment?

jqueryjquery-plugins
168
AnApprentice

Vous pouvez simplement animer pour faire défiler la page en animant la propriété scrollTop, aucun plugin requis, comme ceci:

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

Notez l'utilisation de window.onload (lorsque les images sont chargées ... qui occupent une hauteur) plutôt que document.ready.

Pour être techniquement correct, vous devez soustraire la hauteur de la fenêtre, mais cela fonctionne:

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

Pour faire défiler jusqu'à un ID particulier, utilisez sa .scrollTop() , comme ceci:

$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);
363
Nick Craver

quelque chose comme ça:

var $target = $('html,body'); 
$target.animate({scrollTop: $target.height()}, 1000);
17
Josiah Ruddell
$('html,body').animate({ scrollTop: 9999 }, 'slow');

Aussi simple que cela, hauteur de 9999 pages ... large gamme pour atteindre le fond.

13
Alin Razvan

Tu peux essayer ça 

var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});
8
Sarath Ak
$("div").scrollTop(1000);

Travaille pour moi. Fait défiler vers le bas.

8
f123

En utilisant 'document.body.clientHeight', vous pouvez obtenir la hauteur visible des éléments du corps 

$('html, body').animate({
    scrollTop: $("#particularDivision").offset().top - document.body.clientHeight + $("#particularDivision").height()
}, 1000);

cela défile à l'id 'particularDivision'

3
Anbu

Les scripts mentionnés dans les réponses précédentes, comme:

$("body, html").animate({
    scrollTop: $(document).height()
}, 400)

ne fonctionnera pas dans Chrome et sera instable dans Safari si la propriété html dans CSS a la propriété overflow: auto; définie. Il m'a fallu presque une heure pour comprendre.

1
Ilia Rostovtsev

Pour jQuery 3, veuillez changer 

$ (fenêtre) .load (fonction () { $ ("html, body"). animate ({scrollTop: $ (document) .height ()}, 1000); })

à:

$ (fenêtre) .on ("load", fonction (e) { $ ("html, body"). animate ({scrollTop: $ (document) .height ()}, 1000); } )

1
Adnan Tahir

js

var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;
0
codeskyblue
$('#pagedwn').bind("click", function () {
        $('html, body').animate({ scrollTop:3031 },"fast");
        return false;
});

Cette solution a fonctionné pour moi. Cela fonctionne dans le défilement rapide de la page. 

0
vikram venkatesh