jQuery Scorri fino alla fine della pagina

196

Dopo che la mia pagina è stata caricata. Voglio che jQUery scorra bene fino alla fine della pagina, animando rapidamente, non uno scatto / sussulto.

Ho bisogno di un plugin come ScrollToquello? o è integrato in jQuery come?

jquery jquery-plugins

— Un apprendista
fonte

416

Puoi semplicemente animare per scorrere verso il basso la pagina animando la scrollTopproprietà, nessun plug-in richiesto, come questo:

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

Si noti l'uso di window.onload(quando vengono caricate le immagini ... che occupano l'altezza) anzichédocument.ready .

Per essere tecnicamente corretto, è necessario sottrarre l'altezza della finestra, ma quanto sopra funziona:

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

Per scorrere fino a un determinato ID, utilizzare il suo .scrollTop(), in questo modo:

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

— Nick Craver
fonte

2

Un altro problema, è quando sembra fatto, e quindi l'utente cerca di cercare, per un po 'è bloccato e fa un effetto molto scuotente, impedendo all'utente di scorrere verso l'alto

— AnApprentice,

1

@AnApprentice - Questo perché accade rapidamente (400 ms per impostazione predefinita), consiglierei solo uno scorrimento rapido per alleviare quel problema.

— Nick Craver

3

Il blocco è perché la distanza è disattivata. Si sta animando oltre l'animazione visibile.

— Josiah Ruddell,

27

@NickCraver - con l'ultima versione di jQuery .scrollTop () sembra non funzionare per scorrere fino a un determinato ID; con .offset (). top dovrebbe funzionare: $("html, body").animate({ scrollTop: $("#myID").offset().top }, 1000);

— Paolo Gibellini

3

Questa risposta deve essere modificata. $(document).height()è un valore troppo grande per la scrollTopproprietà, lo si può notare dall'allentamento. Penso che $(document).height() - window.innerHeightdovrebbe essere ok.

— Silvenon,

22

qualcosa come questo:

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

— Josiah Ruddell
fonte

Ho provato ad aggiornare l'obiettivo a .write-comment e non ha funzionato. Forse perché viene iniettato nella pagina?

— AnApprentice,

16

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

Semplice come questo, 9999 altezza della pagina ... ampia gamma in modo che possa raggiungere il fondo.

— Alin Razvan
fonte

1

Questo non è perfetto, poiché in alcuni casi, anche se raro, potrebbero esserci pagine più lunghe, specialmente pagine che caricano dinamicamente contenuti illimitati. Ciò interromperà lo scorrimento a metà strada.

— Akhil Gupta,

13

Puoi provare questo

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

— Sarath Ak
fonte

10

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

Per me va bene. Scorre verso il basso.

— F123
fonte

13

Non se la tua pagina è più lunga di 1000 px.

— Volomike,

4

Gli script citati nelle risposte precedenti, come:

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

non funzionerà in Chrome e sarà instabile in Safari nel caso in cui il html tag CSS abbia le overflow: auto;proprietà impostate. Mi ci è voluta quasi un'ora per capire.

— Ilia Rostovtsev
fonte

3

Usando 'document.body.clientHeight' puoi ottenere l'altezza vista degli elementi del corpo

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

questo scorre sull'id 'particolareDivisione'

— Anbu
fonte

1

Per jQuery 3, si prega di cambiare

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

per:

$ (finestra) .on ("carica", funzione (e) {$ ("html, body"). animate ({scrollTop: $ (document) .height ()}, 1000);})

— Adnan Tahir
fonte

1

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

Questa è la soluzione che lavoro da me e, ne sono sicuro

— Roshan Madusanka
fonte

0

js

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

— codeskyblue
fonte

Sebbene questo codice possa aiutare a risolvere il problema, non spiega perché e / o come risponde alla domanda. Fornire questo contesto aggiuntivo migliorerebbe significativamente il suo valore educativo a lungo termine. Si prega di modificare la risposta di aggiungere spiegazioni, tra cui quello che si applicano le limitazioni e le assunzioni.

— Toby Speight,

0

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

Questa soluzione ha funzionato per me. Sta funzionando velocemente in Page Scroll Down.

— vikram venkatesh
fonte

0

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

Quindi, quando la pagina si apre, scorre automaticamente verso il basso dopo 1 millisecondo

— WapShivam
fonte