Hola.
He instalado un script que lleva de un enlace a una zona de la página con un efecto de scroll de transición.
Concretamente éste:
Código:
window.smoothScroll = function(target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do { //find the top of target relatively to the container
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
scroll = function(c, a, b, i) {
i++; if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function(){ scroll(c, a, b, i); }, 20);
}
// start scrolling
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}
Luego pones este evento en cualquier enlace que quieras para que te lleve a una zona de la página de forma suave:
Código:
<a href="#seccion-a" rel="nofollow" onclick="smoothScroll(document.getElementById('seccion-a'))">Sección A</a>
Por dar más detalles os diré que se trata de una página de FAQ con un buen número de preguntas en enlaces que deben conducir a la respuesta.
Funciona perfectamente, pero me he puesto a editar la página en cuestión y he visto que el evento en sí (onclick="smoothScroll(document.getElementById('xx xxx'))" ) se repite y se repite añadiendo mucho peso a la página, y he pensado si no se podría hacer un acercamiento común al tema, es decir, quitarlo e incluirlo en el script, fuera de la página, generalizarlo de algún modo para evitar esto:
Código:
<a href="#seccion-a" rel="nofollow" onclick="smoothScroll(document.getElementById('seccion-a'))">Sección A</a>
<a href="#seccion-b" rel="nofollow" onclick="smoothScroll(document.getElementById('seccion-b'))">Sección B</a>
<a href="#seccion-c" rel="nofollow" onclick="smoothScroll(document.getElementById('seccion-c'))">Sección C</a>
<a href="#seccion-d" rel="nofollow" onclick="smoothScroll(document.getElementById('seccion-d'))">Sección D</a>
<a href="#seccion-e" rel="nofollow" onclick="smoothScroll(document.getElementById('seccion-e'))">Sección E</a>
<a href="#seccion-f" rel="nofollow" onclick="smoothScroll(document.getElementById('seccion-f'))">Sección F</a>
<a href="#seccion-g" rel="nofollow" onclick="smoothScroll(document.getElementById('seccion-g'))">Sección G</a>
<a href="#seccion-h" rel="nofollow" onclick="smoothScroll(document.getElementById('seccion-h'))">Sección H</a>
<a href="#seccion-i" rel="nofollow" onclick="smoothScroll(document.getElementById('seccion-i'))">Sección I</a>
...
...
...
Si me entendéis.
Gracias.