jQuery Przewiń do dołu strony

196

Po zakończeniu ładowania strony. Chcę, aby jQUery ładnie przewijało do dołu strony, animując szybko, a nie snap / wstrząs.

Czy potrzebuję takiej wtyczki ScrollTo? czy jest to wbudowane w jQuery jakoś?

jquery jquery-plugins Uczeń
źródło

Odpowiedzi:

416

Możesz po prostu animować, aby przewinąć stronę w dół, animując scrollTopwłaściwość, nie jest wymagana wtyczka:

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

Zwróć uwagę na użycie window.onload(gdy obrazy są ładowane ... które zajmują wysokość) zamiast document.ready.

Aby być technicznie poprawnym, musisz odjąć wysokość okna, ale powyższe działa:

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

Aby przewinąć do określonego identyfikatora, użyj jego .scrollTop():

$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);
Nick Craver
źródło
2
Innym problemem jest to, kiedy wydaje się, że jest zrobione, a następnie użytkownik próbuje wykpić się, przez chwilę jest zablokowany i robi bardzo wstrząsający efekt, uniemożliwiając użytkownikowi
przewinięcie w
1
@AnApprentice - Dzieje się tak, ponieważ dzieje się to szybko (domyślnie 400 ms), zalecam szybkie przewinięcie, aby złagodzić ten problem.
Nick Craver
3
Blokada jest spowodowana brakiem odległości. Animuje obok widocznej animacji.
Josiah Ruddell,
27
@NickCraver - z najnowszą wersją jQuery .scrollTop () wydaje się nie działać, aby przewinąć do określonego identyfikatora; z .offset (). góra powinna działać: $("html, body").animate({ scrollTop: $("#myID").offset().top }, 1000);
Paolo Gibellini
3
Ta odpowiedź wymaga edycji. $(document).height()ma zbyt dużą wartość dla scrollTopnieruchomości, można to zauważyć przez złagodzenie. Myślę, że $(document).height() - window.innerHeightpowinno być ok.
silvenon
22

coś takiego:

var $target = $('html,body'); 
$target.animate({scrollTop: $target.height()}, 1000);
Josiah Ruddell
źródło
Próbowałem zaktualizować cel do .write-comment i to nie zadziałało. Może dlatego, że jest wstrzykiwany na stronę?
AnApprentice
16 
$('html,body').animate({ scrollTop: 9999 }, 'slow');

Tak proste, że wysokość strony 9999 ... duży zasięg, aby sięgać do dołu.

Alin Razvan
źródło
1
Nie jest to idealne, ponieważ w niektórych przypadkach, nawet jeśli są rzadkie, mogą istnieć strony dłuższe, szczególnie strony dynamicznie ładujące nieograniczoną zawartość. Spowoduje to zatrzymanie przewijania w połowie.
Akhil Gupta
13

Możesz tego spróbować 

var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});
Sarath Ak
źródło
10 
$("div").scrollTop(1000);

Pracuje dla mnie. Przewija na dół.

f123
źródło
13
Nie, jeśli Twoja strona ma więcej niż 1000 pikseli.
Volomike,
4

Skrypty wymienione w poprzednich odpowiedziach, takie jak:

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

nie będzie działać w Chrome i będzie wzburzony w Safari w przypadku, gdy html tag w CSS ma overflow: auto;ustawioną właściwość. Zrozumienie zajęło mi prawie godzinę.

Ilia Rostowcew
źródło
3

Za pomocą „document.body.clientHeight” możesz uzyskać widoczną wysokość elementów ciała 

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

przewija się przy identyfikatorze „szczególny podział”

Anbu
źródło
1

W przypadku jQuery 3 zmień

$ (okno) .load (funkcja () {$ ("html, body"). animacja ({scrollTop: $ (dokument) .height ()}, 1000);})

do:

$ (okno) .on („ładuj”, funkcja (e) {$ („html, body”). animuj ({scrollTop: $ (dokument) .height ()}, 1000);})

Adnan Tahir
źródło
1 
function scrollToBottom() {
     $("#mContainer").animate({ scrollTop: $("#mContainer")[0].scrollHeight }, 1000);
}

To rozwiązanie działa ode mnie i jestem pewien, że

Roshan Madusanka
źródło
0

js

var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;
codkyblue
źródło
Chociaż ten kod może pomóc w rozwiązaniu problemu, nie wyjaśnia, dlaczego i / lub jak odpowiada na pytanie. Zapewnienie tego dodatkowego kontekstu znacznie poprawiłoby jego długoterminową wartość edukacyjną. Proszę edytować swoje odpowiedzi, aby dodać wyjaśnienie, w tym, co stosuje się ograniczenia i założenia.
Toby Speight
0 
$('#pagedwn').bind("click", function () {
        $('html, body').animate({ scrollTop:3031 },"fast");
        return false;
});

To rozwiązanie działało dla mnie. Działa szybko w Przewijanie strony w dół.

Vikram Venkatesh
źródło
0 
var pixelFromTop = 500;     
$('html, body').animate({ scrollTop: pixelFromTop  }, 1);

Tak więc po otwarciu strona jest automatycznie przewijana w dół po 1 minucie

WapShivam
źródło