Come scorrere su ID in JavaScript?

Come scorrere su ID in JavaScript?

I siti Web o le pagine Web spesso forniscono la funzionalità per reindirizzarti alla sezione specificata. Ad esempio, accedere al contenuto della pagina pertinente in risposta alla query di ricerca dall'estremità dell'utente. Questa funzionalità è generalmente evidente nei siti Web basati sulla ricerca in cui il contenuto è troppo lungo per essere attraversato. Considerando questo, scorrere l'ID in JavaScript è molto utile nel salvare i tempi dell'utente e accedere immediatamente ai contenuti correlati.

Questo blog spiegherà i metodi da scorrere su ID in JavaScript.

Come scorrere su ID in JavaScript?

Per scorrere l'ID in JavaScript, è possibile applicare i seguenti metodi:

  • "ScrollIntOview ()" Metodo.
  • "ScrollIntOview ()Metodo "con un"al clic"Evento.
  • "scrollto ()"Metodo e i suoi attributi.

I seguenti approcci dimostreranno il concetto indicato uno per uno!

Metodo 1: scorrere su ID in JavaScript usando il metodo ScrollIntOVIEW ()

Questo metodo può essere implementato per accedere a un particolare paragrafo tramite il suo ID e scorrere direttamente.

Il seguente esempio illustra il concetto dichiarato.

Esempio

In primo luogo, includi l'intestazione nel "

Pitone

Inoltre, assegna il specificato "id"Al paragrafo seguente per essere scorciato:

Python è un linguaggio molto buono per iniziare con la programmazione. Ciò include elenco, sublisti, array, loop, funzioni, variabili e molto altro. Inoltre, include varie librerie e pacchetti da integrare con varie funzionalità integrate ed eseguire attività.

Allo stesso modo, ripeti i passaggi sopra per includere rispettivamente le seguenti intestazioni e paragrafi:

JavaScript


JavaScript è un linguaggio di scripting che aiuta molto a progettare varie pagine Web interattive. Può essere integrato con HTML per applicare anche alcune funzionalità aggiunte. In questo modo, attira anche l'utente finale.

Successivamente, specificare la seguente immagine e regolare le sue dimensioni:



Inoltre, utilizza il “Href"Attributo insieme al""Tag per accedere alla funzione specificata:

Scorri al paragrafo

Infine, dichiara la funzione chiamata "scrolltoid ()"A cui accedere per lo scorrimento. Nella definizione della funzione, accedi all'ID paragrafo usando "documento.getElementById ()Metodo e applicare il "ScrollIntOview ()"Metodo sull'ID accessibile. Ciò comporterà lo scorrimento del DOM al paragrafo corrispondente:

funzione scrolltoid ()
var access = documento.getElementById ("para");
accesso.ScrollIntOVIEW (comportamento: 'liscio', true);

L'output risultante sarà:

Metodo 2: scorrere su ID in JavaScript usando il metodo ScrollIntOVIEW () con un evento OnClick

Questi metodi possono essere applicati in combinazione per recuperare l'ID di una particolare immagine e scorrere su di esso sul clic del pulsante.

Esempio

Nel seguente esempio, specificare la seguente intestazione:

Fai clic sul pulsante per scorrere sull'elemento.

Quindi, crea il pulsante specificato insieme a un "al clic"Evento che invoca la funzione scrollToid ():



Ora, includi le seguenti immagini con ID specificati e dimensioni regolate:


Infine, definisci la funzione denominata "scrolltoid ()". Qui, accedi allo stesso modo l'ID assegnato di una delle immagini e ti scorri su di esso usando "ScrollIntOview ()" metodo:

funzione scrolltoid ()
var access = documento.getElementById ("id2");
accesso.scrollIntOVIEW ();

Produzione

Metodo 3: scorrere su ID in JavaScript usando il metodo Scrollto () e i suoi attributi

IL "scrollto ()"Il metodo scorre il documento su coordinate specificate. Questo metodo può essere applicato per scorrere sull'immagine specificata usando gli attributi del metodo.

Sintassi

finestra.Scrollto (x, y)

Nella sintassi data, "X" E "y"Indicare le coordinate orizzontali e verticali rappresentate rispettivamente in pixel. Nell'esempio seguente, entrambi sono assegnati come "955"

Per cancellare il concetto, passare attraverso il seguente esempio.

Esempio

Innanzitutto, includi l'immagine specificata all'interno della specifica "div"Elemento e regola le sue dimensioni:



Allo stesso modo, ripeti la procedura sopra con la seguente immagine:



Successivamente, usando il “Href"Attributo, accedere alla funzione specificata all'interno del"ancoraggio (a)"Tag:

Scorri fino all'immagine



Ultimo, definisci la funzione denominata "scrolltoid ()". Qui, prendi l'ID specificato corrispondente a una delle immagini incluse. Inoltre, applica il "scrollto ()"Metodo insieme ai suoi attributi (Scrolltop, ScrollLeft) facendo riferimento all'ID dell'immagine recuperata. Ciò comporterà scorrere il DOM all'immagine contro l'ID recuperato:

funzione scrolltoid ()
var access = documento.getElementById ("IMG1");
finestra.scrollto (
Top: accesso.scrolltop,
A sinistra: accesso.scrollleft);

Produzione

Abbiamo compilato vari metodi per scorrere su ID in JavaScript.

Conclusione

Per scorrere su ID in JavaScript, applica il “ScroIntOVIEW ()"Metodo per accedere all'ID specificato del paragrafo e scorrere verso di esso,"ScroIntOVIEW ()Metodo "con un"al clic"Evento da scorrere sull'immagine accessibile al clic del pulsante o"scrollto ()"Metodo e i suoi attributi per scorrere sull'immagine accessibile regolando gli attributi del metodo applicato. Questo blog ha dimostrato i metodi da scorrere su ID in JavaScript.