The Digital Mike

Hola lectores, alguna vez haz tenido dificultades con los enlaces de anclaje en tus paginas? Pues hoy vamos a ver una forma que puede ayudarte a resolver esa problemática de una manera simple y eficiente. Para esto vamos a conocer como usar enlaces de anclaje con JavaScript.

Usar enlaces de anclaje con JavaScript nos va a permitir navegar por la misma pagina de manera suave y mejorada con una simple linea de código. Sin mas vamos a ver como podemos hacerlo.

Agregar enlaces de anclaje

Supongamos que tenemos una pagina con una lista de varios productos de venta, en la que tenemos botones, los cuales queremos que nos lleve a un formulario que tenemos en la pagina.

Cada sección de la lista tiene un botón con el objetivo de dirigir al usuario al formulario al final de la pagina. Ademas tenemos otro botón al final de la pagina para poder regresar al principio de la pagina.

En la primera parte, agregaremos el id necesario al principio de la pagina para poder navegar de regreso al principio de la misma.

<div id="main">
        <h1>Targetas de productos</h1>
    </div>

Lo botones no sera necesario agregarles nada debido a que todos van directo al formulario. El único botón al que le agregaremos un id=»up» al que nos permite regresar al principio de la pagina. Para esto veremos el HTML donde va el formulario, así como el botón con el id. Tambien agregaremos el id necesario para apuntar al formulario, y esto se hace agregándole id=»theform» a la etiqueta section.

<section id="theform">
        <form action="">
            <h3><strong>el formulario</strong></h3>
              ...
        </form>
        <button id="up">Arriba</button>
    </section>

Utilizar los enlaces de anclaje

Para utilizar estos botones de manera que funciones con los enlaces internos, vamos a crear una script donde declararemos una variable para guardar los botones. Luego crearemos un método foreach para definir el tipo de navegación que haremos dependiendo del botón que pinchemos.

<script>
        var btn = document.querySelectorAll('button');
        btn.forEach(el =>{
           ...
        });
    </script>

Ahora que tenemos el foreach, vamos a agregar una condición, la cual chequeara si el botón tiene el atributo id, y el texto que el id posee. En este caso, vamos a chequear si, el botón tiene un id, y si el atributo de este es main ejecutaremos un script para volver al principio de la pagina. Si en vez de eso no posee id, entonces haremos que el botón navegue hacia donde esta el formulario.

Para navegar hacia los objetivo, usaremos «document.getElementById(‘id’).scrollIntoView({behavior: ‘smooth’});» donde id sera el valor del atributo id, en este caso «main«. ScrollIntoView(), permitirá desplazar el elemento con id=»main» al área visible de la ventana del navegador, y behavior: ‘smooth’ hara que el movimiento sea haga de manera suave y fluida.

btn.forEach(el =>{
            if(el.hasAttribute('id') && el.getAttribute('id', 'main')){
                el.onclick = function(){
                    document.getElementById('main').scrollIntoView({behavior: 'smooth'});
                };
            } else{
                el.onclick = function(){
                    document.getElementById('theform').scrollIntoView({behavior: 'smooth'});
                }
            }
        });