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>
animate
, en donde indicas la clase del span, ¿Reemplazas la clase del spamatarget1
por la clase a la que te debe llevar? De no ser así, ese podría ser el problema, que siempre te lleva altarget1