Jak przewiń na górę strony za pomocą JavaScript/JQuery
Pasek przewijania lub funkcja przewijania określa pozycję, w której ma miejsce przewijanie. Pasek przewijania może poruszać się zarówno w poziomie, jak i pionowo. Poziomy pasek przewijania pozwala nam przewijać zawartość poziomo i.mi., lewo czy prawo. Podczas gdy pionowy pasek przewijania pozwala nam przewijać zawartość pionowo i.mi., Góra czy dół.
Teraz pytanie polega na tym, jak włączyć przewijanie pionowe w JavaScript lub jQuery, aby za każdym razem, gdy użytkownik kliknie przycisk, strona przewija się do najwyższej pozycji? Dobrze! Mamy kilka podejść, które można wykorzystać do wykonania tego zadania.
Ten post wyjaśni działanie poniżej listy, aby przewijać stronę do najwyższej pozycji:
- Jak przewijać stronę do najwyższej pozycji za pomocą JavaScript?
- Jak przewijać stronę do najwyższej pozycji za pomocą JQuery?
Więc zacznijmy!
Jak przewijać stronę do najwyższej pozycji za pomocą JavaScript?
W JavaScript interfejs okna zawiera wbudowaną metodę o nazwie scrollto (), którą można użyć do przewijania do jakiejś konkretnej pozycji na stronie.
Składnia
Aby śledzić poniższą składnię, aby pracować z metodą scrollto ():
| 1 | okno.Scrollto (X-Coordinate, współrzędne Y); |
Powyższy fragment pokazuje, że okno.Metoda scrollto () akceptuje współrzędne X i współrzędne Y jako parametry. Jeśli określamy oba współrzędne jako „0”, metoda scrollto () przeniesie/przewija stronę do najwyższego punktu.
Przykład: jak korzystać z okna.Metoda scrollto ()?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
Powyższy program wykonał zadania poniżej:
- Utworzony
I
Tagi, aby dodać nagłówki i zastosowane wbudowane CSS, aby je stylizować.
- Stworzył kilka akapitów za pomocą
element.
- Utworzył przycisk o nazwie „Scrollback na górę!".
- Kliknięcie „Scrollback na górę!„Przycisk wywoła metodę„ topfun () ”.
- W metodzie topfun () wykorzystaliśmy okno.Metoda scrollto ().
- W związku z tym ustawiamy oba współrzędne jako 0, klikając „Scrollback na górę!”Przycisk przewija stronę do najwyższej pozycji.
Wyjście zweryfikowało, że kliknięcie przycisku przewijało stronę do najwyższej pozycji.
Jak przewijać stronę do najwyższej pozycji za pomocą JQuery?
JQuery zapewnia metodę o nazwie „ScrollTop ()”, która służy do zwracania/ustawienia pozycji Scroll paska dla docelowego elementu. Pozycja 0 reprezentuje, że pasek Scroll jest na górze. Musimy więc przekazać „0” jako argument do metody „scrolltop ()”, aby przewinąć z powrotem na górę strony.
Składnia
Postępuj zgodnie z poniżej podaną składnią, aby uzyskać pozycję pionowego paska przewijania:
| 1 | $ (selektor).scrolltop (); |
Postępuj zgodnie z poniżej podaną składnią, aby ustawić pozycję pionowego paska przewijania:
| 1 | $ (selektor).scrolltop (pozycja); |
Przykład: Jak użyć metody ScrollTop ()?
Rozważmy następujący blok kodu, aby zrozumieć działanie metody ScrollTop ():
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
|
Powyższy blok kodu wykonał następujące funkcje:
- Utworzony
I
Tagi, aby dodać nagłówki i zastosowane wbudowane CSS, aby je stylizować.
- Stworzył kilka akapitów za pomocą
element.
- Utworzył przycisk o nazwie „Kliknij tutaj!".
- Kliknij „Kliknij tutaj!„Przycisk wywoła metodę„ topfun () ”.
- W metodzie topfun () wykorzystaliśmy metodę ScrollTop ().
- Minęliśmy „0” jako pozycję do metody ScrollTop (). W związku z tym kliknięcie „Kliknij tutaj!”Przycisk przewija stronę do najwyższej pozycji.
W ten sposób metoda ScrollTop () działa w jQuery
Wniosek
W JavaScript, przekazanie „0, 0” jako parametr do okna.Metoda scrollto () przewija stronę do najwyższej pozycji. W jQuery przekazując „0” jako argument do metody „ScrollTop ()”, przewija stronę do najwyższej pozycji. Ten post rozważał kilka przykładów, aby zapewnić szczegółową wiedzę na temat okna.Metody scrollto () i scrolltop ().