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>