jQuery Scroll En bas de la page

196

Après le chargement de ma page. Je veux que jQUery défile bien vers le bas de la page, s'animant rapidement, pas un snap / jolt.

Ai-je besoin d'un plugin comme ScrollToça? ou est-ce intégré à jQuery?

jquery jquery-plugins

— Un apprenti
source

416

Vous pouvez simplement animer pour faire défiler la page en animant la scrollToppropriété, 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 de la hauteur) plutôt que document.ready.

Pour être techniquement correct, vous devez soustraire la hauteur de la fenêtre, mais ce qui précède fonctionne:

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

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

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

— Nick Craver
source

2

Un autre problème, c'est quand cela semble fait, puis l'utilisateur essaie de remonter, pour un peu il est verrouillé, et fait un effet très cahotant, empêchant l'utilisateur de faire défiler vers le haut

— AnApprentice

1

@AnApprentice - C'est parce que cela se produit rapidement (400 ms par défaut), je recommanderais juste un défilement rapide pour résoudre ce problème.

— Nick Craver

3

Le verrou est dû au fait que la distance est coupée. Il anime au-delà de l'animation visible.

— Josiah Ruddell

27

@NickCraver - avec la dernière version de jQuery .scrollTop () semble ne pas fonctionner pour faire défiler jusqu'à un ID particulier; avec .offset (). top devrait fonctionner: $("html, body").animate({ scrollTop: $("#myID").offset().top }, 1000);

— Paolo Gibellini

3

Cette réponse doit être modifiée. $(document).height()est trop grande valeur pour la scrollToppropriété, vous pouvez le constater par l'assouplissement. Je pense que ça $(document).height() - window.innerHeightdevrait aller.

— silvenon

22

quelque chose comme ça:

var $target = $('html,body'); 
$target.animate({scrollTop: $target.height()}, 1000);

— Josiah Ruddell
source

J'ai essayé de mettre à jour la cible en .write-comment et cela n'a pas fonctionné. Peut-être parce que cela est injecté dans la page?

— AnApprentice

16

$('html,body').animate({ scrollTop: 9999 }, 'slow');

Aussi simple que cela, 9999 pages de hauteur ... grande plage pour qu'il puisse atteindre le bas.

— Alin Razvan
source

1

Ce n'est pas parfait, car dans certains cas, même si c'est rare, il peut y avoir des pages plus longues que cela, en particulier des pages qui chargent dynamiquement un contenu illimité. Cela arrêtera le défilement à mi-chemin.

— Akhil Gupta

13

Vous pouvez essayer ceci

var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});

— Sarath Ak
source

10

$("div").scrollTop(1000);

Travaille pour moi. Défile vers le bas.

— f123
source

13

Pas si votre page dépasse 1 000 pixels.

— Volomike

4

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 au cas où la html balise en CSS a un overflow: auto;jeu de propriétés. Il m'a fallu près d'une heure pour comprendre.

— Ilia Rostovtsev
source

3

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

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

cela défile à l'id 'particularDivision'

— Anbu
source

1

Pour jQuery 3, veuillez modifier

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

à:

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

— Adnan Tahir
source

1

function scrollToBottom() {
     $("#mContainer").animate({ scrollTop: $("#mContainer")[0].scrollHeight }, 1000);
}

C'est le travail de solution de moi et vous trouvez, je suis sûr

— Roshan Madusanka
source

0

js

var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;

— codeskyblue
source

Bien que ce code puisse aider à résoudre le problème, il n'explique pas pourquoi et / ou comment il répond à la question. Fournir ce contexte supplémentaire améliorerait considérablement sa valeur éducative à long terme. Veuillez modifier votre réponse pour ajouter des explications, y compris les limitations et hypothèses applicables.

— Toby Speight

0

$('#pagedwn').bind("click", function () {
        $('html, body').animate({ scrollTop:3031 },"fast");
        return false;
});

Cette solution a fonctionné pour moi. Il fonctionne rapidement dans Page Scroll Down.

— vikram venkatesh
source

0

var pixelFromTop = 500;     
$('html, body').animate({ scrollTop: pixelFromTop  }, 1);

Donc, lorsque la page est ouverte, elle défile automatiquement après 1 milliseconde

— WapShivam
source