Skip to main content
se eliminaron 4 caracteres en el cuerpo
Origen Enlace
Jefferzon Bol
  • 2.8k
  • 2
  • 8
  • 18

Se me ocurre que puedes usar la función scrollIntoView pasándole el id del botón, por ejemplo:

TenesAgregar los dos botones o enlaces a usar:

<a class="desplazar" moveTo="Desplazar1" href="#">Desplazar 1</a>
<a class="desplazar" moveTo="Desplazar2" href="#">Desplazar 2</a>

A estos le pasamos un atributo llamado moveTo que guardara el ID del anclaje

Agregamos nuestros items con el ID del ancla

<div id="Desplazar1" style="margin-top: 400px;height: 300px;background: #000;color: #fff;" id="Desplazar1">Desplazar#fff;">Desplazar 1</div>
<div id="Desplazar2" style="margin-top: 200px;height: 300px;background: #000;color: #fff;" id="Desplazar2">Desplazar#fff;">Desplazar 2</div>

luego obtenemos todos los enlaces con la clase .desplazar

var links = document.querySelectorAll( '.desplazar' );

Luego usando forEach recorremos todos los enlaces.

links.forEach( link =>{
    link.addEventListener( "click",_ => {
            
    });
});

Y aqui viene la magia, usamos

event.preventDefault()

para eliminar el evento por defecto, luego, al objeto actual le extraemos nuestro ID a desplazar usando getAttribute

let moveTo = link.getAttribute( 'moveTo' );

Y por ultimo hacemos el scroll usando scrollIntoView

document.getElementById( moveTo ).scrollIntoView(true);

Ejemplo:

var links = document.querySelectorAll( '.desplazar' );

    links.forEach( link =>{
        link.addEventListener( "click",_ => {
            
            event.preventDefault();
            let moveTo = link.getAttribute( 'moveTo' );
            document.getElementById( moveTo ).scrollIntoView(true);

        });
    });
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
</head>
<body>

    <a class="desplazar" moveTo="Desplazar1" href="#">Desplazar 1</a>
    <a class="desplazar" moveTo="Desplazar2" href="#">Desplazar 2</a>

    <div style="margin-top: 400px;height: 300px;background: #000;color: #fff;" id="Desplazar1">Desplazar 1</div>
    
  <div style="margin-top: 200px;height: 300px;background: #000;color: #fff;" id="Desplazar2">Desplazar
  2</div>

</body>
</html>

Esto debería permitirte desplazarte a las anclas sin comprometer las urls.

Se me ocurre que puedes usar la función scrollIntoView pasándole el id del botón, por ejemplo:

Tenes los dos botones o enlaces a usar:

<a class="desplazar" moveTo="Desplazar1" href="#">Desplazar 1</a>
<a class="desplazar" moveTo="Desplazar2" href="#">Desplazar 2</a>

A estos le pasamos un atributo llamado moveTo que guardara el ID del anclaje

Agregamos nuestros items con el ID del ancla

<div style="margin-top: 400px;height: 300px;background: #000;color: #fff;" id="Desplazar1">Desplazar 1</div>
<div style="margin-top: 200px;height: 300px;background: #000;color: #fff;" id="Desplazar2">Desplazar 2</div>

luego obtenemos todos los enlaces con la clase .desplazar

var links = document.querySelectorAll( '.desplazar' );

Luego usando forEach recorremos todos los enlaces.

links.forEach( link =>{
    link.addEventListener( "click",_ => {
            
    });
});

Y aqui viene la magia, usamos

event.preventDefault()

para eliminar el evento por defecto, luego, al objeto actual le extraemos nuestro ID a desplazar usando getAttribute

let moveTo = link.getAttribute( 'moveTo' );

Y por ultimo hacemos el scroll usando scrollIntoView

document.getElementById( moveTo ).scrollIntoView(true);

Ejemplo:

var links = document.querySelectorAll( '.desplazar' );

    links.forEach( link =>{
        link.addEventListener( "click",_ => {
            
            event.preventDefault();
            let moveTo = link.getAttribute( 'moveTo' );
            document.getElementById( moveTo ).scrollIntoView(true);

        });
    });
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
</head>
<body>

    <a class="desplazar" moveTo="Desplazar1" href="#">Desplazar 1</a>
    <a class="desplazar" moveTo="Desplazar2" href="#">Desplazar 2</a>

    <div style="margin-top: 400px;height: 300px;background: #000;color: #fff;" id="Desplazar1">Desplazar 1</div>
    
  <div style="margin-top: 200px;height: 300px;background: #000;color: #fff;" id="Desplazar2">Desplazar
  2</div>

</body>
</html>

Esto debería permitirte desplazarte a las anclas sin comprometer las urls.

Se me ocurre que puedes usar la función scrollIntoView pasándole el id del botón, por ejemplo:

Agregar los botones o enlaces a usar:

<a class="desplazar" moveTo="Desplazar1" href="#">Desplazar 1</a>
<a class="desplazar" moveTo="Desplazar2" href="#">Desplazar 2</a>

A estos le pasamos un atributo llamado moveTo que guardara el ID del anclaje

Agregamos nuestros items con el ID del ancla

<div id="Desplazar1" style="margin-top: 400px;height: 300px;background: #000;color: #fff;">Desplazar 1</div>
<div id="Desplazar2" style="margin-top: 200px;height: 300px;background: #000;color: #fff;">Desplazar 2</div>

luego obtenemos todos los enlaces con la clase .desplazar

var links = document.querySelectorAll( '.desplazar' );

Luego usando forEach recorremos todos los enlaces.

links.forEach( link =>{
    link.addEventListener( "click",_ => {
            
    });
});

Y aqui viene la magia, usamos

event.preventDefault()

para eliminar el evento por defecto, luego, al objeto actual le extraemos nuestro ID a desplazar usando getAttribute

let moveTo = link.getAttribute( 'moveTo' );

Y por ultimo hacemos el scroll usando scrollIntoView

document.getElementById( moveTo ).scrollIntoView(true);

Ejemplo:

var links = document.querySelectorAll( '.desplazar' );

    links.forEach( link =>{
        link.addEventListener( "click",_ => {
            
            event.preventDefault();
            let moveTo = link.getAttribute( 'moveTo' );
            document.getElementById( moveTo ).scrollIntoView(true);

        });
    });
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
</head>
<body>

    <a class="desplazar" moveTo="Desplazar1" href="#">Desplazar 1</a>
    <a class="desplazar" moveTo="Desplazar2" href="#">Desplazar 2</a>

    <div style="margin-top: 400px;height: 300px;background: #000;color: #fff;" id="Desplazar1">Desplazar 1</div>
    
  <div style="margin-top: 200px;height: 300px;background: #000;color: #fff;" id="Desplazar2">Desplazar
  2</div>

</body>
</html>

Esto debería permitirte desplazarte a las anclas sin comprometer las urls.

Origen Enlace
Jefferzon Bol
  • 2.8k
  • 2
  • 8
  • 18

Se me ocurre que puedes usar la función scrollIntoView pasándole el id del botón, por ejemplo:

Tenes los dos botones o enlaces a usar:

<a class="desplazar" moveTo="Desplazar1" href="#">Desplazar 1</a>
<a class="desplazar" moveTo="Desplazar2" href="#">Desplazar 2</a>

A estos le pasamos un atributo llamado moveTo que guardara el ID del anclaje

Agregamos nuestros items con el ID del ancla

<div style="margin-top: 400px;height: 300px;background: #000;color: #fff;" id="Desplazar1">Desplazar 1</div>
<div style="margin-top: 200px;height: 300px;background: #000;color: #fff;" id="Desplazar2">Desplazar 2</div>

luego obtenemos todos los enlaces con la clase .desplazar

var links = document.querySelectorAll( '.desplazar' );

Luego usando forEach recorremos todos los enlaces.

links.forEach( link =>{
    link.addEventListener( "click",_ => {
            
    });
});

Y aqui viene la magia, usamos

event.preventDefault()

para eliminar el evento por defecto, luego, al objeto actual le extraemos nuestro ID a desplazar usando getAttribute

let moveTo = link.getAttribute( 'moveTo' );

Y por ultimo hacemos el scroll usando scrollIntoView

document.getElementById( moveTo ).scrollIntoView(true);

Ejemplo:

var links = document.querySelectorAll( '.desplazar' );

    links.forEach( link =>{
        link.addEventListener( "click",_ => {
            
            event.preventDefault();
            let moveTo = link.getAttribute( 'moveTo' );
            document.getElementById( moveTo ).scrollIntoView(true);

        });
    });
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
</head>
<body>

    <a class="desplazar" moveTo="Desplazar1" href="#">Desplazar 1</a>
    <a class="desplazar" moveTo="Desplazar2" href="#">Desplazar 2</a>

    <div style="margin-top: 400px;height: 300px;background: #000;color: #fff;" id="Desplazar1">Desplazar 1</div>
    
  <div style="margin-top: 200px;height: 300px;background: #000;color: #fff;" id="Desplazar2">Desplazar
  2</div>

</body>
</html>

Esto debería permitirte desplazarte a las anclas sin comprometer las urls.