Cómo desplazarse a ID en JavaScript?

Cómo desplazarse a ID en JavaScript?

Los sitios web o páginas web a menudo proporcionan la funcionalidad para redirigirlo a la sección especificada. Por ejemplo, acceder al contenido de la página relevante en respuesta a la consulta de búsqueda desde el final del usuario. Esta funcionalidad generalmente es evidente en los sitios web basados ​​en la investigación donde el contenido es demasiado largo para pasar. Teniendo en cuenta esto, desplazarse a ID en JavaScript es muy útil para guardar el tiempo del usuario y acceder al contenido relacionado al instante.

Este blog explicará los métodos para desplazarse a ID en JavaScript.

Cómo desplazarse a ID en JavaScript?

Para desplazarse a ID en JavaScript, se pueden aplicar los siguientes métodos:

  • "desplácese a la vista()" Método.
  • "desplácese a la vista()"Método con un"al hacer clic" Evento.
  • "scrollto ()"Método y sus atributos.

Los siguientes enfoques demostrarán el concepto establecido uno por uno!

Método 1: Desplácese a ID en JavaScript usando el método scrolliNtoview ()

Este método se puede implementar para acceder a un párrafo particular a través de su identificación y desplazarse directamente a él.

El siguiente ejemplo ilustra el concepto declarado.

Ejemplo

En primer lugar, incluya el encabezado en el "

Pitón

Además, asigne el especificado "identificación"Al siguiente párrafo para desplazarse:

Python es un lenguaje muy bueno para comenzar con la programación. Esto incluye lista, sublistas, matrices, bucle, funciones, variables y mucho más. Además, incluye varias bibliotecas y paquetes para integrarse con varias funcionalidades incorporadas y realizar tareas.

Del mismo modo, repita los pasos anteriores para incluir el siguiente encabezado y párrafo respectivamente:

Javascript


JavaScript es un lenguaje de secuencias de comandos que ayuda mucho al diseño de varias páginas web interactivas. Se puede integrar con HTML para aplicar algunas funcionalidades adicionales también. De esta manera, también atrae al usuario final.

Después de eso, especifique la siguiente imagen y ajuste sus dimensiones:



Además, utilice el "href"Atributo junto con el""Etiqueta para acceder a la función especificada:

Desplazarse al párrafo

Finalmente, declare la función llamada "scrolltoid ()Para acceder para desplazarse. En la definición de función, acceda a la identificación del párrafo utilizando el "documento.getElementById ()Método "y aplicar el"desplácese a la vista()"Método sobre la identificación de acceder. Esto dará como resultado desplazar el DOM al párrafo correspondiente:

función scrolltoid ()
VAR Access = documento.getElementById ("para");
acceso.scrollintoview (comportamiento: 'suave', true);

La salida resultante será:

Método 2: Desplácese a ID en JavaScript usando el método scrollintoview () con un evento OnClick

Estos métodos se pueden aplicar en combinación para obtener la identificación de una imagen en particular y desplazarse hacia él al hacer clic en el botón.

Ejemplo

En el siguiente ejemplo, especifique el siguiente encabezado:

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

A continuación, cree el botón especificado junto con un "al hacer clic"Evento invocar la función scrollToid ()::



Ahora, incluya las siguientes imágenes con las ID especificadas y las dimensiones ajustadas:


Finalmente, defina la función llamada "scrolltoid ()". Aquí, accede de manera similar a la ID asignada de una de las imágenes y desplázate a ella usando el "desplácese a la vista()" método:

función scrolltoid ()
VAR Access = documento.getElementById ("ID2");
acceso.desplácese a la vista();

Producción

Método 3: Desplácese a ID en JavaScript usando el método scrollTO () y sus atributos

El "scrollto ()"Método desplaza el documento a coordenadas especificadas. Este método se puede aplicar para desplazarse a la imagen especificada utilizando los atributos del método.

Sintaxis

ventana.Scrollto (x, y)

En la sintaxis dada, "X" y "Y"Indique las coordenadas horizontales y verticales representadas en píxeles respectivamente. En el ejemplo dado a continuación, ambos se asignan como "955"

Para despejar el concepto, pase por el siguiente ejemplo.

Ejemplo

Primero, incluya la imagen especificada dentro de la especificada "div"Elemento y ajuste sus dimensiones:



Del mismo modo, repita el procedimiento anterior con la siguiente imagen:



A continuación, usando el "href"Atributo, acceda a la función especificada dentro del"ancla (a)" etiqueta:

Desplazarse a la imagen



Por último, defina la función llamada "scrolltoid ()". Aquí, obtenga la ID especificada correspondiente a una de las imágenes incluidas. Además, aplique el "scrollto ()Método junto con sus atributos (Scrolltop, Scrollleft) refiriéndose a la ID de la imagen obtenida. Esto dará como resultado desplazar el DOM a la imagen contra la ID obtenida:

función scrolltoid ()
VAR Access = documento.getElementById ("IMG1");
ventana.scrollto (
Arriba: acceso.cañón de desplazamiento,
Izquierda: acceso.scrollleft);

Producción

Hemos compilado varios métodos para desplazarse a ID en JavaScript.

Conclusión

Para desplazarse a ID en JavaScript, aplique el "scrolintoview ()"Método para acceder a la identificación especificada del párrafo y desplácese hacia él, el" "scrolintoview ()"Método con un"al hacer clic"Evento para desplazarse a la imagen al que se accede en el botón Haga clic o al"scrollto ()Método "y sus atributos para desplazarse a la imagen accedida ajustando los atributos del método aplicado. Este blog demostró los métodos para desplazarse a ID en JavaScript.