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

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