2

Tengo un div en una web con muchas páginas en su interior y un scroll. En la parte de la derecha varios botones que hacen referencia a unas etiquetas span en diferentes páginas. Para ir a esos spans uso el siguiente código:

$('.button-click1').click(function() {
    $('.scroll-container').animate({
        scrollTop: $("span.target1").offset().top
    }, 2000);
});
$('.button-click2').click(function() {
    $('.scroll-container').animate({
        scrollTop: $("span.target2").offset().top
    }, 2000);
});
$('.button-click2').click(function() {
    $('.scroll-container').animate({
        scrollTop: $("span.target3").offset().top
    }, 2000);
});

Si pulso una vez el botón, me lleva al span que quiero, pero, si vuelvo a darle a otro botón para otro span, ¿por qué me lleva al top del div donde están todas las páginas? ¿No debería ir al siguiente tag o al que le de yo al click?

Edito, este el div donde está el texto como ejemplo:

<div class="scroll-container">
<div class="pag1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="target3">Nulla odio metus, cursus vitae lectus a</span>, congue facilisis purus. Nunc ut diam neque. Donec semper dapibus metus nec vulputate. Nunc leo augue, mollis in accumsan quis, vestibulum at erat. Phasellus auctor lacus hendrerit augue lacinia porta vel non enim. Sed blandit sit amet lacus nec sodales. Aliquam ultrices molestie turpis, eu vehicula velit scelerisque ac. Nulla a sem a nisi congue tristique a nec quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque purus metus, rutrum eget augue eu, varius porta diam. Vestibulum ac massa at dui fermentum finibus nec id metus. Aliquam ac justo sem.
    Nulla eget tellus diam. Vestibulum lacinia pharetra quam a tristique. Nulla in volutpat erat. Nulla sit amet luctus magna. Nam tincidunt nec dolor vitae semper. Suspendisse sodales iaculis convallis. Fusce congue maximus erat, vitae ornare metus viverra ac. Pellentesque ac semper leo, quis scelerisque purus. Phasellus vitae sodales felis, sit amet cursus libero. 
</div>
<div class="pag2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla odio metus, cursus vitae lectus a, congue facilisis purus. Nunc ut diam neque. Donec semper dapibus metus nec vulputate. Nunc leo augue, mollis in accumsan quis, vestibulum at erat. Phasellus auctor lacus hendrerit augue lacinia porta vel non enim. Sed blandit sit amet lacus nec sodales. Aliquam ultrices molestie turpis, eu vehicula velit scelerisque ac. Nulla a sem a nisi congue tristique a nec quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque purus metus, rutrum eget augue eu, varius porta diam. Vestibulum ac massa at dui fermentum finibus nec id metus. Aliquam ac justo sem.
    Nulla eget tellus diam. Vestibulum lacinia pharetra quam a tristique. <span class="target1">Nulla in volutpat erat.</span> Nulla sit amet luctus magna. Nam tincidunt nec dolor vitae semper. Suspendisse sodales iaculis convallis. Fusce congue maximus erat, vitae ornare metus viverra ac. Pellentesque ac semper leo, quis scelerisque purus. Phasellus vitae sodales felis, sit amet cursus libero. 
</div>
<div class="pag3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla odio metus, cursus vitae lectus a, congue facilisis purus. Nunc ut diam neque. Donec semper dapibus metus nec vulputate. Nunc leo augue, mollis in accumsan quis, vestibulum at erat. Phasellus auctor lacus hendrerit augue lacinia porta vel non enim. Sed blandit sit amet lacus nec sodales. Aliquam ultrices molestie turpis, eu vehicula velit scelerisque ac. Nulla a sem a nisi congue tristique a nec quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque purus metus, rutrum eget augue eu, varius porta diam. Vestibulum ac massa at dui fermentum finibus nec id metus. Aliquam ac justo sem.
    Nulla eget tellus diam. Vestibulum lacinia pharetra quam a tristique. <span class="target2">Nulla in volutpat erat. Nulla sit amet luctus magna.</span> Nam tincidunt nec dolor vitae semper. Suspendisse sodales iaculis convallis. Fusce congue maximus erat, vitae ornare metus viverra ac. Pellentesque ac semper leo, quis scelerisque purus. Phasellus vitae sodales felis, sit amet cursus libero. 
</div></div>
6
  • Pon el html donde tienes esos sean para ver como lo tienes
    – Sr1871
    Commented el 30 jul. 2019 a las 20:56
  • Ya está, he puesto un ejemplo que tiene varios targets. Este scroll container es un div dentro de otro div y que en él tiene un scroll para ver esos textos. No es el scroll del navegador sino el del div el que se mueve.
    – Qadesh
    Commented el 30 jul. 2019 a las 21:02
  • En la función animate, en donde indicas la clase del span, ¿Reemplazas la clase del spama target1 por la clase a la que te debe llevar? De no ser así, ese podría ser el problema, que siempre te lleva al target1
    – A.Medina
    Commented el 30 jul. 2019 a las 21:13
  • si, el botón 1 va a la clase target1, el 2 va a la clase target2... siempre es único, no hay duplicados. Por otro lado, me sorprende y es lo que no entiendo, por qué cada vez que doy click primero me lleva al target adecuado y luego sube al top del div? Necesita recalcular o algo así?
    – Qadesh
    Commented el 30 jul. 2019 a las 21:19
  • Tienes 3 botones y 3 targets, pero, ¿tienes 3 funciones? La función que utilizas es única, esta función siempre está apuntando al target1 ? Podrías editar tu pregunta añadiendo el código completo que estás usando ? Para entender mejor el problema
    – A.Medina
    Commented el 30 jul. 2019 a las 21:31

1 respuesta 1

2

Según lo que veo en tu código, estás usando el mismo listener para el evento, y no estás especificando cuál es el elemento al que quuerés tomar como referencia para hacer el scroll. En todo caso, tu código debería verse algo así:

$('.button-click').click(function() {
    let targetClick = '.' + $(this).attr('target');
    $('.scroll-container').animate({
        scrollTop: $(targetClick ).offset().top
    }, 2000);
});

Y en tu HTML, hacer referencia al selector en el atributo target del elemento:

<span class="link-scroll" target="Titulo1" >¡Click!</span>
...
<h1 id="Titulo1">¡Título 1!<//h1>

Adicionalmente, veo que el elemento scroll-container será el elemento que reciba el scroll. Por este motivo, debés calcular el offset de cada elemento considerando los siguientes factores:

  • Debés sumar al offset la posición del contenedor
  • Una vez que se haya hecho el primer scroll, el offset de los elementos anteriores va a ser menor, dado que su posición actual ha cambiado con respecto a la página.

Te copio un ejemplo funcional:

$(document).ready(function(){
  let posiciones = {};
  
  // Almacenar en variable local la posición de cada span 
  // para poder hacer scroll luego
  $('span[class*=target]').each(function(){
    posiciones[$(this).attr('class')] = $(this).offset().top;
  });
  
  $('.button-click').click(function(){
    let targetClick = '.' + $(this).attr('target');
    $('.contenido').animate({
      // Hacer scroll a la posición original del elemento
      // tomando en cuenta el offset del contenedor.
      scrollTop: posiciones[$(this).attr('target')] - $('.contenido').offset().top
    }, 2000);
  });
});
.blank {
  display: block;
  height: 600px;
}

.menu-lateral {
  position: fixed;
  left: 0;
  top: 50%;
  margin-top: -25px;
}

.menu-lateral li {
  color: blue;
  cursor: pointer;
}

.contenido {
  display: block;
  height: 400px;
  overflow-y: scroll;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-lateral">
  <ul>
    <li class="button-click" target="target1">Span 1</li>
    <li class="button-click" target="target2">Span 2</li>
    <li class="button-click" target="target3">Span 3</li>
  </ul>
 </div>
 <div class="contenido">
  <div class="blank">
  </div>
  <span class="target1">Target 1</span>
  <div class="blank">
  </div>
  <span class="target2">Target 2</span>
  <div class="blank">
  </div>
  <span class="target3">Target 3</span>
</div>

Te copio un ejemplo gráfico de las medidas de los elementos y las posiciones de offset().top en los diferentes estados de los elementos al modificar el scroll del contenedor.

Ejemplo de posiciones de los elementos

10
  • Acabo de editar, cada botón va a un 'target' distinto. Yo pongo ese mismo código que me has puesto, y me falla.
    – Qadesh
    Commented el 30 jul. 2019 a las 21:06
  • Estás usando un valor literal para el target. En todo caso, asumiendo que el item de menú contiene un atributo llamado target, que apunta a la clase del elemento, debés usar la asignación let targetClick = '.' + $(this).attr('target'); para asignar el elemento al que querés llegar a la variable targetClick, y asi reemplazar el literal $("span.target1") por $(targetClick)
    – Niche
    Commented el 30 jul. 2019 a las 21:10
  • Si hay 3 botones y 3 targets, no hay posibilidad de duplicados. El botón 1 va a la clase target1, el 2 al target 2 etc... siempre son diferentes. El caso es que una vez llega bien, y la segunda vez que hago click me va al top del div.
    – Qadesh
    Commented el 30 jul. 2019 a las 21:20
  • Ya vi que actualizaste la clase para adherir el evento a cada uno de los botones. Te sugiero que usés un solo selector para adherir el evento a todos los botones $('.button-click') y utilizar una lógica para llamar al elemento correspondiente.
    – Niche
    Commented el 30 jul. 2019 a las 21:31
  • Hice la misma prueba usando atributos DATA con idéntico resultado e incluso con IDs en lugar de clases, pero, siempre obtengo el mismo resultado. Hago click...y va al span, vuelvo a hacer click en cualquiera de los otros botones, me val top del div en lugar de a otro span...
    – Qadesh
    Commented el 30 jul. 2019 a las 21:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.