Cómo desplazarse a la parte superior de la página usando JavaScript/jQuery
La barra de desplazamiento o la característica de desplazamiento determina la posición en la que se lleva a cabo el desplazamiento. Una barra de desplazamiento puede moverse horizontalmente y verticalmente. La barra de desplazamiento horizontal nos permite desplazar el contenido horizontalmente i.mi., izquierda o derecha. Mientras que la barra de desplazamiento vertical nos permite desplazar el contenido verticalmente.mi., arriba o abajo.
Ahora a la pregunta es cómo habilitar el desplazamiento vertical en JavaScript o jQuery para que cada vez que un usuario haga clic en un botón, la página se desplaza a la posición más alta? Bien! Tenemos un par de enfoques que se pueden usar para realizar esta tarea.
Esta publicación explicará el funcionamiento de los enfoques de la lista de abajo para desplazar la página a la posición más alta:
- Cómo desplazar una página a la posición más alta usando JavaScript?
- Cómo desplazar una página a la posición más alta usando jQuery?
Entonces empecemos!
Cómo desplazar una página a la posición más alta usando JavaScript?
En JavaScript, la interfaz de la ventana proporciona un método incorporado llamado scrollTO () que puede usarse para desplazarse a alguna posición particular en la página.
Sintaxis
Usted sigue la siguiente sintaxis para trabajar con el método scrollTO ():
| 1 | ventana.scrollTO (x-coordenate, y-coordenate); |
El fragmento anterior muestra que la ventana.El método scrollTO () acepta la coordenada X y la coordenada Y como parámetros. Si especificamos ambas coordenadas como "0", el método scrollTo () se moverá/desplazará la página al punto más alto.
Ejemplo: cómo usar la ventana.método scrollto ()?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 dieciséis 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
El programa anterior realizó las tareas a continuación:
- Creado
y
Etiquetas para agregar encabezados y aplicados CSS en línea para diseñarlos.
- Creó un par de párrafos usando
elemento.
- Creó un botón llamado "Scrollback en la parte superior!".
- Haciendo clic en el "Scrollback to the Top!"El botón invocará el método" topfun () ".
- Dentro del método topfun (), utilizamos la ventana.método scrollto ().
- Establecemos ambas coordenadas como 0, en consecuencia, haciendo clic en el "Backback en la parte superior!El botón "se desplazará la página a la posición superior.
La salida verificó que hacer clic en el botón desplazó la página a la posición más alta.
Cómo desplazar una página a la posición más alta usando jQuery?
JQuery proporciona un método llamado "scrollTop ()" que se utiliza para devolver/establecer la posición vertical de barra de desplazamiento para el elemento objetivo. La posición 0 representa que la barra de desplazamiento está en la parte superior. Entonces, tenemos que pasar "0" como argumento al método "scrollTop ()" para desplazarse de regreso a la parte superior de la página.
Sintaxis
Siga la sintaxis dada a continuación para obtener la posición vertical de barra de desplazamiento:
| 1 | $ (selector).scrolltop (); |
Siga la sintaxis dada a continuación para establecer la posición vertical de barra de desplazamiento:
| 1 | $ (selector).scrolltop (posición); |
Ejemplo: cómo usar el método scrollTop ()?
Consideremos el siguiente bloque de código para comprender el funcionamiento del método ScrollTop ():
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 dieciséis 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
|
El bloque de código anterior realizó las siguientes funcionalidades:
- Creado
y
Etiquetas para agregar encabezados y aplicados CSS en línea para diseñarlos.
- Creó un par de párrafos usando
elemento.
- Creó un botón llamado "Haga clic aquí!".
- Haciendo clic en "Haga clic aquí!"El botón invocará el método" topfun () ".
- Dentro del método topFun (), utilizamos el método scrollTop ().
- Pasamos "0" como posición para el método scrollTop (). En consecuencia, hacer clic en "Haga clic aquí!El botón "se desplazará la página a la posición superior.
Así es como funciona el método scrollTop () en jQuery
Conclusión
En JavaScript, pasando "0, 0" como parámetro a la ventana.El método scrollto () desplazará la página a la posición más alta. En jQuery, pasar "0" como argumento al método "scrollTop ()" desplazará la página a la posición más alta. Esta publicación consideró un par de ejemplos para proporcionar un conocimiento detallado sobre la ventana.Métodos ScrollTO () y ScrollTop ().