[SOLUCIONADO] Agrupar Evento onclick

[JUMASOL]

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.

[Alexis88]

Una forma efectiva consiste en delegar el evento ya sea al elemento que contiene a los enlaces o al documento. Para esto, tendrás que dejar de trabajar con JavaScript inline.

Código Javascript:

document.addEventListener("click", function(event){
    if (event.target.href.indexOf("#seccion-") > -1){
        smoothScroll(document.querySelector(event.target.href));
    }
}, false);
 

Cuando se produzca el evento click en el documento, toma al elemento directamente afectado por el clic mediante la propiedad event.target y verifica que en su propiedad href se encuentre el texto "#seccion-"; de ser así, ejecutas tu función pasándole como argumento al elemento hacia el cual apunta el ancla del enlace.

Un saludo

[JUMASOL]

He colocado el tema como solucionado pero veo que no es así.

En principio, se trata de que los ejemplos de link "seccion" son un ejemplo nada más, porque lo cierto es que se trata de preguntas totalmente distintas, con lo que no es posible el establecer esa localización de palabra "seccion-" dentro de la propiedad href.

Supongo que se podría hacer mediante una clase. ¿Sí?

[Alexis88]

Claro. La idea es utilizar un valor común a todos los elementos que se desee afectar.

En el caso de una clase, la condición sería así:

Código Javascript:

if (event.target.className == "la clase"){
    //...
}
 

[JUMASOL]

Código:

  document.addEventListener("click", function(event){
 if (event.target.className == "la-clase"){
 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);
}
    }
}, false);

El enlace lo he puesto así:

Código:

<a class="la-clase" href="!#enlace" rel="nofollow"">¿Enlace?</a>

Disculpa Alexis, pero no me sale.

Falta de conocimientos.