Jak przewinąć do elementu za pomocą JavaScript

Podczas surfowania po stronach internetowych przewijanie do elementu utrzymuje użytkownika w skupieniu, przykuwając jego uwagę na długi czas. Funkcjonalność tę można zastosować, gdy użytkownik potrzebuje przewijać za pomocą jednego kliknięcia lub, w przypadku testów automatyzacji, natychmiast sprawdzić dodaną treść na dole strony. W takich scenariuszach przewijanie do elementu w JavaScript dodaje funkcjonalność, którą można zastosować jednym kliknięciem bez dużej interakcji użytkownika i oszczędza czas.

Ten podręcznik poprowadzi Cię do przewijania do elementu za pomocą JavaScript.

Jak przewinąć do elementu za pomocą JavaScript?

Aby przewinąć do elementu za pomocą JavaScript, możesz użyć:

• • “ scrollIntoView() ' metoda
  • “ zwój() ' metoda
  • “ przewińDo() ' metoda

Wspomniane podejścia będą ilustrowane jeden po drugim!

Metoda 1: Przewiń do elementu w JavaScript za pomocą metody scrollIntoView()

„ scrollIntoView() Metoda ” przewija element do widocznego obszaru Document Object Model (DOM). Tę metodę można zastosować, aby uzyskać określony kod HTML i zastosować do niego konkretną metodę za pomocą zdarzenia onclick.

Składnia

W podanej składni „ wyrównywać ” wskazuje typ wyrównania.

Przykład

W poniższym przykładzie dodaj następujący nagłówek, używając „

” tag:

< h2 > Kliknij przycisk, aby przewinąć do elementu. h2 >

Teraz utwórz przycisk z „ na kliknięcie ” zdarzenie wywołujące funkcję” scrollElement() :

< przycisk na kliknięcie = 'przewińElement()' > Element przewijania przycisk >
< br >

Następnie określ źródło obrazu i jego identyfikator, aby można go było przewijać:

< obraz src = 'recenzja.PNG' ID = „dział” >

Na koniec zdefiniuj funkcję o nazwie „ scrollElement() ”, który pobierze wymagany element za pomocą „ document.getElementById() ” i zastosuj na niej metodę scrollIntoView() w celu przewinięcia obrazu:

funkcjonować scrollElement ( ) {
var element = document.getElementById ( „dział” ) ;
element.scrollIntoView ( ) ;
}

Kod CSS

W kodzie CSS zastosuj następujące wymiary, aby dostosować rozmiar obrazu, odwołując się do identyfikatora obrazu „ div ”:

#div{
wysokość: 800px;
szerokość: 1200px;
przelew: auto;
}

Odpowiednie wyjście będzie:

Metoda 2: Przewiń do elementu w JavaScript za pomocą metody window.scroll()

„ okno.przewiń() Metoda ” przewija okno zgodnie z wartościami współrzędnych w dokumencie. Ta metoda może być zaimplementowana w celu pobrania identyfikatora obrazu, ustawienia jego współrzędnych za pomocą funkcji i przewinięcia określonego obrazu.

Składnia

okno.przewiń ( współrzędna x, współrzędna y )

W powyższej składni „ x-współrzędna ” odnosi się do współrzędnych X, a „ współrzędna y ” wskazuje współrzędne Y.

Poniższy przykład wyjaśnia podaną koncepcję.

Przykład

Powtórz te same kroki, aby dodać nagłówek, utworzyć przycisk, zastosować zdarzenie onclick i określić źródło obrazu za pomocą jego identyfikatora:

< h2 > Kliknij przycisk, aby przewinąć do elementu. h2 >
< przycisk na kliknięcie = 'przewińElement()' > Element przewijania przycisk >
< br >
< obraz src = 'obraz.PNG' ID = „dział” >

Następnie zdefiniuj funkcję o nazwie „ scrollElement() ”. Tutaj dostosujemy współrzędne za pomocą „ okno.przewiń() ” poprzez dostęp do funkcji o nazwie „ Pozycja() ” i stosując go na pobranym elemencie obrazu:

funkcjonować scrollElement ( ) {
okno.przewiń ( 0 , Pozycja ( document.getElementById ( „dział” ) ) ) ;
}

Następnie zdefiniuj funkcję o nazwie „ Pozycja() ” przyjmując zmienną obj jako argument. Zastosuj również „ offsetParent ”, która uzyska dostęp do najbliższego przodka, który nie ma statycznej pozycji i zwróci ją. Następnie zwiększ zainicjowaną górną wartość prądu za pomocą „ offsetTop ” właściwość, która zwróci najwyższą pozycję względem rodzica (offsetParent) i zwróci wartość „ obecny top ”, gdy dodany warunek zostanie oceniony jako prawdziwy:

funkcjonować Pozycja ( obiekt ) {
gdzie obecnytop = 0 ;
jeśli ( obj.offsetParent ) {
robić {
currenttop += obj.offsetTop;
} podczas gdy ( ( obj = obj.offsetParent ) ) ;
zwrócić [ obecnytop ] ;
}
}

Na koniec dostosuj styl utworzonego kontenera zgodnie z własnymi wymaganiami:

#div{
wysokość: 1000px;
szerokość: 1000px;
przelew: auto;
}

Wyjście

Metoda 3: Przewiń do elementu w JavaScript za pomocą metody scrollTo()

„ przewińDo() Metoda ” przewija określony dokument do przypisanych współrzędnych. Ta metoda może być podobnie zaimplementowana, aby uzyskać element, używając jego identyfikatora i wykonując wymaganą funkcjonalność do przewijania określonego obrazu na DOM.

Składnia

window.scrollTo ( x i y )

Tutaj, ' x ' oraz ' Tak ” wskaż współrzędne x i y.

Spójrz na poniższy przykład.

Przykład

Najpierw powtórz kroki omówione powyżej, aby dodać nagłówek, przycisk ze zdarzeniem onclick i obraz w następujący sposób:

< h2 > Kliknij przycisk, aby przewinąć do elementu. h2 >
< przycisk na kliknięcie = 'przewińElement()' > Element przewijania przycisk >
< br >
< obrazek src = 'obraz.JPG' ID = „dział” >

Następnie zdefiniuj funkcję o nazwie „ scrollElement() ” i ustaw przewijanie, wywołując metodę Position() w metodzie scrollTo():

funkcjonować scrollElement ( ) {
window.scrollTo ( 0 , Pozycja ( document.getElementById ( „dział” ) ) ) ;
}

Na koniec zdefiniuj funkcję o nazwie Position() i podobnie zastosuj powyższe kroki do ustawienia współrzędnych określonego obrazu:

funkcjonować Pozycja ( obiekt ) {
gdzie obecnytop = 0 ;
jeśli ( obj.offsetParent ) {
robić {
currenttop += obj.offsetTop;
} podczas gdy ( ( obj = obj.offsetParent ) ) ;
zwrócić [ obecnytop ] ;
}
}

Wyjście

Omówiliśmy wszystkie wygodne metody przewijania do elementu za pomocą JavaScript.

Wniosek

Aby przewinąć do elementu w JavaScript, użyj „ scrollIntoView() ” metoda dostępu do elementu i zastosowania określonej funkcjonalności, „ okno.przewiń() ”, aby pobrać element, ustawić jego współrzędne za pomocą funkcji i przewinąć obraz lub użyć „ przewińDo() ”, aby pobrać element i odpowiednio go przewinąć. Ten blog zademonstrował koncepcję przewijania do elementu za pomocą JavaScript.