Jak přejít na prvek pomocí JavaScriptu

Při procházení webových stránek rolování na prvek udržuje uživatele soustředěného tím, že upoutá jeho pozornost na dlouhou dobu. Tuto funkci lze použít, když uživatel potřebuje posouvat pouze jedním kliknutím nebo v případě testování automatizace okamžitě zkontrolovat přidaný obsah ve spodní části stránky. V takových scénářích posouvání na prvek v JavaScriptu přidává funkce, které lze použít jediným kliknutím bez velké interakce uživatele, a šetří čas.

Tato příručka vás provede rolováním na prvek pomocí JavaScriptu.

Jak přejít na prvek pomocí JavaScriptu?

Chcete-li přejít na prvek pomocí JavaScriptu, můžete použít:

• • “ scrollIntoView() “ metoda
  • “ svitek() “ metoda
  • “ scrollTo() “ metoda

Uvedené přístupy budou jeden po druhém ilustrovány!

Metoda 1: Přejděte na prvek v JavaScriptu pomocí metody scrollIntoView().

' scrollIntoView() Metoda ” posune prvek do viditelné oblasti modelu objektu dokumentu (DOM). Tuto metodu lze použít k získání zadaného HTML a aplikovat na něj konkrétní metodu pomocí události onclick.

Syntax

V dané syntaxi „ zarovnat ” označuje typ zarovnání.

Příklad

V následujícím příkladu přidejte následující nadpis pomocí „

značka ”:

< h2 > Klepnutím na tlačítko přejděte na prvek. h2 >

Nyní vytvořte tlačítko s „ při kliknutí 'událost vyvolávající funkci' scrollElement() :

< knoflík při kliknutí = 'scrollElement()' > Posunout prvek knoflík >
< br >

Poté zadejte zdroj obrázku a jeho id, aby bylo možné posouvat:

< obraz src = 'recenze.PNG' id = 'div' >

Nakonec definujte funkci s názvem „ scrollElement() “, který načte požadovaný prvek pomocí „ document.getElementById() ” a aplikujte na ni metodu scrollIntoView(), abyste mohli posouvat obrázek:

funkce scrollElement ( ) {
var element = document.getElementById ( 'div' ) ;
element.scrollIntoView ( ) ;
}

CSS kód

V kódu CSS použijte následující rozměry pro úpravu velikosti obrázku odkazem na ID obrázku „ div “:

#div{
výška: 800px;
šířka: 1200px;
přetečení: auto;
}

Odpovídající výstup bude:

Metoda 2: Přejděte na prvek v JavaScriptu pomocí metody window.scroll().

' window.scroll() ” posouvá okno podle hodnot souřadnic v dokumentu. Tuto metodu lze implementovat k načtení ID obrázku, nastavení jeho souřadnic pomocí funkce a posouvání zadaného obrázku.

Syntax

okno.rolovat ( X-coord, y-coord )

Ve výše uvedené syntaxi „ x-coord 'se vztahuje na souřadnice X a ' y-souřadnice “ označuje souřadnice Y.

Následující příklad vysvětluje uvedený koncept.

Příklad

Opakujte stejné kroky pro přidání nadpisu, vytvoření tlačítka, použití události onclick a určení zdroje obrázku s jeho id:

< h2 > Klepnutím na tlačítko přejděte na prvek. h2 >
< knoflík při kliknutí = 'scrollElement()' > Posunout prvek knoflík >
< br >
< obraz src = 'image.PNG' id = 'div' >

Dále definujte funkci s názvem „ scrollElement() “. Zde upravíme souřadnice pomocí „ window.scroll() “ metodou přístupem k funkci s názvem “ Pozice() “ a jeho použití na načtený prvek obrázku:

funkce scrollElement ( ) {
okno.rolovat ( 0 , Pozice ( document.getElementById ( 'div' ) ) ) ;
}

Poté definujte funkci s názvem „ Pozice() ” s proměnnou obj jako argumentem. Aplikujte také „ offsetParent ” vlastnost, která přistoupí k nejbližšímu předkovi, který nemá statickou pozici, a vrátí ji. Poté zvyšte inicializovanou aktuální nejvyšší hodnotu pomocí „ offsetTop ” vlastnost, která vrátí nejvyšší pozici vzhledem k nadřazenému (offsetParent) a vrátí hodnotu “ aktuální vrchol ” když je přidaná podmínka vyhodnocena jako pravdivá:

funkce Pozice ( obj ) {
kde aktuální vrchol = 0 ;
-li ( obj.offsetParent ) {
dělat {
currenttop += obj.offsetTop;
} zatímco ( ( obj = obj.offsetParent ) ) ;
vrátit se [ aktuální vrchol ] ;
}
}

Vytvořený kontejner nakonec upravte podle svých požadavků:

#div{
výška: 1000px;
šířka: 1000px;
přetečení: auto;
}

Výstup

Metoda 3: Přejděte na prvek v JavaScriptu pomocí metody scrollTo().

' scrollTo() Metoda ” posune zadaný dokument na přiřazené souřadnice. Tuto metodu lze podobně implementovat pro získání prvku pomocí jeho id a provedením požadované funkce pro rolování konkrétního obrázku na DOM.

Syntax

window.scrollTo ( x a y )

Tady, ' X ' a ' Y ” ukažte na souřadnice x a y.

Podívejte se na následující příklad.

Příklad

Nejprve zopakujte výše uvedené kroky pro přidání nadpisu, tlačítka s událostí onclick a obrázku následovně:

< h2 > Klepnutím na tlačítko přejděte na prvek. h2 >
< knoflík při kliknutí = 'scrollElement()' > Posunout prvek knoflík >
< br >
< img src = 'image.JPG' id = 'div' >

Dále definujte funkci s názvem „ scrollElement() ” a nastavte rolování vyvoláním metody Position() v metodě scrollTo():

funkce scrollElement ( ) {
window.scrollTo ( 0 , Pozice ( document.getElementById ( 'div' ) ) ) ;
}

Nakonec definujte funkci s názvem Position() a podobně použijte výše uvedené kroky pro nastavení souřadnic zadaného obrázku:

funkce Pozice ( obj ) {
kde aktuální vrchol = 0 ;
-li ( obj.offsetParent ) {
dělat {
currenttop += obj.offsetTop;
} zatímco ( ( obj = obj.offsetParent ) ) ;
vrátit se [ aktuální vrchol ] ;
}
}

Výstup

Diskutovali jsme o všech pohodlných metodách rolování na prvek pomocí JavaScriptu.

Závěr

Chcete-li přejít na prvek v JavaScriptu, použijte „ scrollIntoView() ” metoda pro přístup k prvku a použití specifikované funkce, “ window.scroll() ” metodu pro načtení prvku, nastavení jeho souřadnic pomocí funkce a posouvání obrázku, nebo použijte “ scrollTo() “, abyste načetli prvek a podle toho jej posouvali. Tento blog demonstroval koncept rolování na prvek pomocí JavaScriptu.