Cómo desplazarse a un elemento usando JavaScript

Ahora, cree un botón con un "al hacer clic"Evento invocar la función"Scrollelement ():

Elemento de desplazamiento

Después de eso, especifique la fuente de la imagen y su ID para que se desplazara:

Por último, defina una función llamada "Scrollelement ()"Que obtendrá el elemento requerido usando el"documento.getElementById ()Método "y aplique el método scrollintoview () para desplazar la imagen:

función scrollelement ()
elemento var = documento.getElementByid ("div");
elemento.desplácese a la vista();

Código CSS

En el código CSS, aplique las siguientes dimensiones para ajustar el tamaño de la imagen refiriéndose a la ID de imagen "div":

#div
Altura: 800px;
Ancho: 1200px;
desbordamiento: auto;

La salida correspondiente será:

Método 2: Desplácese a un elemento en JavaScript usando Window.Método Scroll ()

El "ventana.Desplazarse()"El método desplaza la ventana de acuerdo con los valores de coordenadas en el documento. Este método se puede implementar para obtener la ID de imagen, establecer sus coordenadas usando una función y desplazar la imagen especificada.

Sintaxis

ventana.Scroll (X-Coord, Y-Coord)

En la sintaxis anterior, "goord"Se refiere a las coordenadas X, y"coordenina"Indica las coordenadas y.

El siguiente ejemplo explica el concepto declarado.

Ejemplo

Repita los mismos pasos para agregar el encabezado, crear un botón, aplicar el evento OnClick y especificar la fuente de la imagen con su ID:

Haga clic en el botón para desplazarse al elemento.

Elemento de desplazamiento

A continuación, defina una función llamada "Scrollelement ()". Aquí, ajustaremos las coordenadas usando el "ventana.Desplazarse()"Método accediendo a la función llamada"Posición()"Y aplicándolo en el elemento de imagen recuperado:

función scrollelement ()
ventana.desplazamiento (0, posición (documento.getElementById ("div")));

Después de eso, defina una función llamada "Posición()"Tomar un obj variable como argumento. Además, aplique el "compensación"Propiedad, que accederá al antepasado más cercano que no tiene una posición estática y la devuelve. Luego, incrementa el valor superior actual inicializado con la ayuda del "desplazamiento"Propiedad que devolverá la posición superior con respecto al padre (OffsetParent) y devolverá el valor de"Top actual"Cuando la condición adicional se evalúa como verdadera:

posición de función (obj)
var currentTop = 0;
if (obj.offsetParent)
hacer
CurrentTop += obj.Offsettop;
while ((obj = obj.offsetParent));
return [currentTop];

Por último, diseñe el contenedor creado de acuerdo con sus requisitos:

#div
Altura: 1000px;
Ancho: 1000px;
desbordamiento: auto;

Producción

Método 3: Desplácese a un elemento en JavaScript usando el método scrollTO ()

El "scrollto ()El método "desplaza el documento especificado a coordenadas asignadas. Este método se puede implementar de manera similar para obtener el elemento utilizando su ID y realizando la funcionalidad requerida para desplazar la imagen particular en el DOM.

Sintaxis

ventana.Scrollto (x, y)

Aquí, "X" y "Y"Señora a las coordenadas X e Y.

Eche un vistazo al siguiente ejemplo.

Ejemplo

Primero, repita los pasos discutidos anteriormente para agregar un encabezado, un botón con un evento OnClick e imagen de la siguiente manera:

Haga clic en el botón para desplazarse al elemento.

Elemento de desplazamiento

A continuación, defina una función llamada "Scrollelement ()”Y establezca el método de desplazamiento al invocar () en el método scrollTO ():

función scrollelement ()
ventana.ScrollTO (0, posición (documento.getElementById ("div")));

Por último, defina una función llamada posición () y aplique de manera similar los pasos discutidos anteriormente para establecer las coordenadas de la imagen especificada:

posición de función (obj)
var currentTop = 0;
if (obj.offsetParent)
hacer
CurrentTop += obj.Offsettop;
while ((obj = obj.offsetParent));
return [currentTop];

Producción

Hemos discutido todos los métodos convenientes para desplazarse a un elemento usando JavaScript.

Conclusión

Para desplazarse a un elemento en JavaScript, utilice el "desplácese a la vista()Método "para acceder al elemento y aplicar la funcionalidad especificada, la"ventana.Desplazarse()"Método para obtener el elemento, establecer sus coordenadas usando una función y desplazar la imagen o utilizar el"scrollto ()"Método para obtener el elemento y desplazarlo en consecuencia. Este blog demostró el concepto para desplazarse a un elemento usando JavaScript.