Animuj przewijanie do identyfikatora podczas ładowania strony

123

Chcę animować przewijanie do określonego identyfikatora podczas wczytywania strony. Zrobiłem wiele badań i znalazłem to:

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

ale wydaje się, że zaczyna się od identyfikatora i animuje do góry strony?

Kod HTML (znajdujący się w połowie strony) to po prostu:

<h2 id="title1">Title here</h2>
jquery scroll jquery-animate Adi
źródło
1
To nie jest dobra odpowiedź, ale bardzo polecam wtyczkę „scrollTo” Ariela Fleslera; ma wiele funkcji do przesuwania po stronie i kilka rozszerzeń wtyczki w typowych przypadkach (na przykład jego wtyczka „LocalScroll” może być przydatna do przewijania do href linku, jeśli znajduje się na tej samej stronie). Możesz pobrać wtyczkę tutaj: flesler.blogspot.com/2007/10/jqueryscrollto.html
Faisal

Odpowiedzi:

327

Przewijasz tylko wysokość swojego elementu. offset () zwraca współrzędne elementu względem dokumentu, a topparametr param poda odległość elementu w pikselach wzdłuż osi y:

$("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);

Możesz także dodać do niego opóźnienie:

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);
BumbleB2na
źródło
1
Co takiego jest w automatycznym przewijaniu, że mówię „WOW COOL !!”? Może to prostota twojego rozwiązania.
theblang
Musiałem przewinąć element do widoku podczas ładowania strony, ale miałem dwa problemy: a) użycie „html, body” dało dwa wywołania zwrotne (po jednym dla każdego dopasowanego elementu). b) To zależy od przeglądarki, która część body lub html działa. Zrobiłem więc podsumowanie, które możesz dostosować do wykorzystania w swoim projekcie, aby zapewnić działanie przewijania w widoku w „dowolnej” przeglądarce i że po zakończeniu animacji otrzymasz tylko jedno wywołanie zwrotne. gist.github.com/netsi1964/4ddffe1ae14e05220d25
Netsi1964
2
To nie jest poprawne. Naprawdę powinieneś wziąć pod uwagę bieżącą pozycję przewijania treści lub elementu, który próbujemy scroll. Mając to na uwadze, należy dodać bieżącą pozycję przewijania bodydo offset().toppozycji elementu, który chcemy wyświetlić. Wynikowa suma to wartość, do której chcemy przewinąć. $('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);
mattdevio
@magreenberg Czy próbowałeś tego? Jeśli aktualna pozycja przewijania przekracza wartość 0, to sugerowane przez Ciebie elementy mogą nie działać. Załóżmy, że przewijalny kontener ma 1000 pikseli wysokości, a bieżąca pozycja przewijania to 1000. Powiedzmy, że element, do którego przewijasz, znajduje się pośrodku w pionie przy 500. Myślę, że to, co sugerujesz, kazałoby mu przewinąć do 1500 , dobrze?
BumbleB2na
@ BumbleB2na .offset().topdałoby w tym przypadku liczbę ujemną. I to naprawdę działa tylko dla bodyi htmlponieważ offset().topda ci górne przesunięcie dokumentu, a nie zamierzony przewijany rodzic.
mattdevio
12

Czyste rozwiązanie javascript z funkcją scrollIntoView () :

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});
<h2 id="title1">Some title</h2>
Rozwiń fragment

Parametr PS „smooth” działa teraz w Chrome 61, jak wspomniano w komentarzach julien_c .

Vladimir Vovk
źródło
1
Działa teraz (od Chrome 61)
julien_c
Koniecznie sprawdź zgodność przeglądarki. Od 10/2018 IE (11), Edge i Safari obsługują „scrollIntoView”, ale nie obsługują opcji „smooth”.
metal_jacke1
Czysty JS ftw. Dzięki za ten fragment! Gładki jak krem ​​podwójnie maślany
jean d'arme
3

Jest do tego wtyczka jquery. Przewija dokument do określonego elementu, aby był idealnie na środku widoku. Obsługuje również wygładzanie animacji, dzięki czemu efekt przewijania będzie wyglądał super gładko. Sprawdź ten link .

W twoim przypadku kod to

$("#title1").animatedScroll({easing: "easeOutExpo"});
Eugene Tiurin
źródło
„Obsługuje również wygładzanie animacji, dzięki czemu efekt przewijania będzie wyglądał super gładko”. Niestety, nie jest to prawdą. Jeśli komputer z jakiegoś powodu działa wolno, po prostu skacze, nie poruszając się właściwie.
brunoais
Płynne przewijanie wymaga obliczenia dużej liczby pikseli. Z pewnością powolny „komputer” (z większą liczbą GPU) nie może tego zrobić, ale z powodu braku wystarczającej liczby jednostek ALU. Więc generalnie ma rację. I naprawdę łatwe w przewijaniu lib.
Roland
1

spróbuj z następującym kodem. stwórz elementy z nazwą klasy przewijaj stronę i zachowaj id nazwy do hrefodpowiednich linków

$('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });
Achil
źródło
-3

dla prostego przewijania użyj następującego stylu

wysokość: 200px; przepełnienie: przewijanie;

i użyj tej klasy stylu, który div lub sekcję chcesz wyświetlić

mm
źródło