No funciona scrollIntoView, funciona de manera inesperada.
Publicado por Albert J. (3 intervenciones) el 16/12/2022 22:15:50
Que tal amigos. Buenas tardes.
La cuestión es la siguiente, solo estoy probando una función de javascript llamada scrollIntoView(). El código es muy sencillo y su funcionamiento también: al hacer click en un link del menú te debe desplazar hacia el elemento con un efecto llamado "smooth", que es una transición suave hacia el elemento.
El problema: No se aplica la opción behavior: "smooth". Aunque el desplazamiento se da en forma de salto como si solo estuviera funcionando el enlace que hace href="#uno"<-->div id="uno".
1) En el código HTML:
2) Código app.js:
Esto es todo. La función no se aplica, he intentado en varios navegadores, con varios ejemplos pero no se aplica el efecto deseado. No sé si sea alguna mala configuración dentro de mi navegador (que es improbable porque no suelo mover nada).
Espero su ayuda y de antemano muchas gracias.
La cuestión es la siguiente, solo estoy probando una función de javascript llamada scrollIntoView(). El código es muy sencillo y su funcionamiento también: al hacer click en un link del menú te debe desplazar hacia el elemento con un efecto llamado "smooth", que es una transición suave hacia el elemento.
El problema: No se aplica la opción behavior: "smooth". Aunque el desplazamiento se da en forma de salto como si solo estuviera funcionando el enlace que hace href="#uno"<-->div id="uno".
1) En el código HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
<nav class="main-nav">
<a href="#uno">UNO</a>
<a href="#dos">DOS</a>
<a href="#tres">TRES</a>
<a href="#cuatro">CUATRO</a>
</nav>
<div id="uno">
<h2>Sección UNO</h2>
</div>
<div id="dos">
<h2>Sección DOS</h2>
</div>
<div id="tres">
<h2>Sección TRES</h2>
</div>
<div id="cuatro">
<h2>Sección CUATRO</h2>
</div>
<script src="app.js" type="text/javascript"></script>
</body>
2) Código app.js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// seleccionamos la lista de elementos para agregarle un evento.const enlaces = document.querySelectorAll('.main-nav a');
enlaces.forEach( link => {
link.addEventListener("click", function(e) {
// prevenimos el comportamiento por defecto del <a>e.preventDefault();
// guardamos el valor del elemento selecionado: "#uno", "#dos"...const seccionScroll = e.target.attributes.href.value;
// apuntamos al elemento al que nos queremos desplazarconst target = document.querySelector(seccionScroll);
// aplicamos la función para dezplasarnos al elemento seleccionadotarget.scrollIntoView({ behavior: "smooth"});
});
});
Esto es todo. La función no se aplica, he intentado en varios navegadores, con varios ejemplos pero no se aplica el efecto deseado. No sé si sea alguna mala configuración dentro de mi navegador (que es improbable porque no suelo mover nada).
Espero su ayuda y de antemano muchas gracias.
Valora esta pregunta
0
