Come scorrere fino alla parte superiore della pagina usando JavaScript/JQuery

Come scorrere fino alla parte superiore della pagina usando JavaScript/JQuery

La barra di scorrimento o la funzione di scorrimento determina la posizione in cui si svolge lo scorrimento. Una barra di scorrimento può muoversi in orizzontale e verticalmente. La barra di scorrimento orizzontale ci consente di scorrere il contenuto in orizzontale i.e., sinistra o destra. Mentre la barra di scorrimento verticale ci consente di scorrere il contenuto in verticale i.e., su o giù.

Ora mettere in discussione è come abilitare lo scorrimento verticale in JavaScript o JQuery in modo che ogni volta che un utente fa clic su un pulsante, la pagina scorre nella posizione più in alto? BENE! Abbiamo un paio di approcci che possono essere utilizzati per svolgere questo compito.

Questo post spiegherà il funzionamento degli approcci di seguito per scorrere la pagina nella posizione più in alto:

  • Come scorrere una pagina nella posizione più in alto usando JavaScript?
  • Come scorrere una pagina nella posizione più in alto usando jQuery?

Quindi iniziamo!

Come scorrere una pagina nella posizione più in alto usando JavaScript?

In JavaScript, l'interfaccia della finestra fornisce un metodo integrato chiamato Scrollto () che può essere utilizzato per scorrere su una posizione particolare sulla pagina.

Sintassi

Segui la sintassi seguente per lavorare con il metodo Scrollto ():

1
finestra.scrollto (X-coordinate, Y-coordinate);

Lo snippet sopra mostra che la finestra.Il metodo Scrollto () accetta X-coordinate e Y-coordinate come parametri. Se specifichiamo entrambe le coordinate come "0", il metodo ScrollTo () sposterà/scorri la pagina al punto più in alto.

Esempio: come usare la finestra.Metodo 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




Benvenuti in Linuxhint



Anees Asghar



Come scorrere fino alla parte superiore della pagina usando JavaScript/JQuery



Fai clic su "Fai clic qui!"Pulsante per scorrere indietro nella parte superiore della pagina usando JavaScript






Il programma di cui sopra ha eseguito le attività di seguito:

  • Creato

    E

    Tag per aggiungere intestazioni e applicare CSS in linea per modellarli.

  • Creato un paio di paragrafi usando

    elemento.

  • Ha creato un pulsante chiamato "Scorri in alto!".
  • Facendo clic su "Scorri in alto!Il pulsante "invocherà il metodo" topfun () ".
  • Nel metodo topfun (), abbiamo utilizzato la finestra.Metodo Scrollto ().
  • Impostiamo entrambe le coordinate come 0, di conseguenza, facendo clic sul "scorrimento verso l'alto!"Il pulsante scorrerà la pagina nella posizione più in alto.

L'uscita è stata verificata che facendo clic sul pulsante scorrendo la pagina nella posizione più in alto.

Come scorrere una pagina nella posizione più in alto usando jQuery?

JQuery fornisce un metodo chiamato "ScrollTop ()" che viene utilizzato per restituire/impostare la posizione di scorrimento verticale per l'elemento mirato. La posizione 0 rappresenta che la barra di scorrimento è in alto. Quindi, dobbiamo passare "0" come argomento al metodo "Scrolltop ()" per scorrere indietro in cima alla pagina.

Sintassi

Seguire la sintassi di seguito per ottenere la posizione di scorrimento verticale:

1
$ (selettore).scrolltop ();

Segui la sintassi di seguito per impostare la posizione di scorrimento verticale:

1
$ (selettore).scrolltop (posizione);

Esempio: come utilizzare il metodo ScrollTop ()?

Consideriamo il seguente blocco di codice per comprendere il funzionamento del metodo 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




Benvenuti in Linuxhint



Anees Asghar




Come scorrere fino alla parte superiore della pagina usando JavaScript/JQuery


Fai clic su "Fai clic qui!"pulsante per scorrere indietro sul
Top della pagina usando jQuery






Il blocco di codice sopra ha eseguito le seguenti funzionalità:

  • Creato

    E

    Tag per aggiungere intestazioni e applicare CSS in linea per modellarli.

  • Creato un paio di paragrafi usando

    elemento.

  • Ha creato un pulsante chiamato "Fai clic qui!".
  • Facendo clic su "Fai clic qui!Il pulsante "invocherà il metodo" topfun () ".
  • Nel metodo topfun (), abbiamo utilizzato il metodo ScrollTop ().
  • Abbiamo superato "0" come posizione al metodo ScrollTop (). Di conseguenza, facendo clic su "Fai clic qui!"Il pulsante scorrerà la pagina nella posizione più in alto.

Ecco come funziona il metodo ScrollTop () in jQuery

Conclusione

In JavaScript, passando "0, 0" come parametro alla finestra.Il metodo ScrollTo () scorrerà la pagina nella posizione più in alto. In jQuery passando "0" come argomento al metodo "ScrollTop ()" scorrere la pagina nella posizione più in alto. Questo post ha considerato un paio di esempi per fornire una conoscenza dettagliata sulla finestra.Metodi Scrollto () e ScrollTop ().