1

Estoy tratando de poder hacer smooth scroll hacia siguiente elemento con clase "destacado" o al anterior cuando hago click en los botones que estan fijos. No consigo que funcione este método y quizá hay alguna otra manera de simplificarlo.

Agradecería la ayuda de alguien.

La idea es que ante una lista larga de elementos destacados se pueda ir a cualquiera de ellos de manera ordenada hacia adelante o hacia atrás.

No estoy segura de si este sería el método adecuado para lo que necesito.

<script>
$('.despues').click(function(){
    if($(this).is(":checked")) {
        $(this).addClass("marcado");
        $(this).parent().parent().addClass("destacado");
    } else {
        $(this).removeClass('marcado');
        $(this).parent().parent().removeClass("destacado");
    }
});
var $currentElement = $(".destacado").first();

$("#down").click(function () {
    var $nextElement = $currentElement.next('.destacado');
    if($nextElement.length) {
        $currentElement = $nextElement;
        $('html, body').stop(true).animate({
            scrollTop: $nextElement.offset().top
        }, 1000);
    }
    return false;
});

$("#up").click(function () {
    var $prevElement = $currentElement.prev('.destacado');
    if($prevElement.length) {
        $currentElement = $prevElement;
        $('html, body').stop(true).animate({
            scrollTop: $prevElement.offset().top
        }, 1000);
    }
    return false;  
});
</script>
li {min-height: 100vw;}
.destacado {background:#ffaaaa;}
<div style="position:fixed;right: 5vw;"><a href="#" id="down">Siguiente</a>
<a href="#" id="up">Anterior</a></div>
    <ul>
    <li>A</li>
    <li>B</li>
    <li class="destacado">C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li class="destacado">G</li>
    <li class="destacado">H</li>
    <ul>

1 respuesta 1

0

puedes intentar con

window.scrollTo({ top: $($(".destacado")[0]).offset().top,behavior:"smooth"})

donde $(".destacado")[0] seria tu elemento al que deseas ir. Solo lo puse asi para calar si funcionaba para el 0 o 1 o 2

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.