Prejdite na ďalšiu časť / triedu - javascript, jquery, html

Snažím sa posúvať na ďalšiu časť nastránka na základe výrezu. Nechcem mať prehľad o každom prvku a ak boli navštívené, pretože ak sa používateľ rozhodne znova posunúť nahor, mal by sa aj tak iba posunúť do ďalšej časti. Preto som prišiel s týmto riešením:

https://jsfiddle.net/w28tfnm9/

$("#scroll-down").on("click", function() {
$(".section").each(function() {
var isInViewPort = $(this).isInViewport();
if (isInViewPort) {
$("html, body").animate({
scrollTop: $(this).next().offset().top
}, 500);
return false;
}
});
});

Mám však malý problém: Nebude sa posúvať k prvému prvku. To dáva zmysel, pretože skontrolujem, či sa aktuálny prvok nachádza vo výreze, a potom sa presuniem k .next() element, ale nemôžem prísť na to, ako to vyriešiť, bez toho, aby som pokazil to, čo už mám. Existuje lepší spôsob?

Namiesto toho, aby povedal .next()„V podstate chcem, aby to prešlo na ďalší .section prvok. Pretože to nie je zaručené .next() prvok je oddiel, nejde o „dobré“ riešenie.

odpovede:

Takže som skončil s hackom:

https://jsfiddle.net/w28tfnm9/3/

$(window).on("scroll", function() {
if($("body").scrollTop() < $(".section").offset().top) {
hasScrolled = false;
} else {
hasScrolled = true;
}
});

V zásade iterujem každý prvok, ak i === 0 znamená to, že som na vrchole, ale keďže sa pokúšam chytiť ďalší pomocou .get(), Potrebujem nastaviť aktuálnu iteráciu na -1. Funguje ako kúzlo a „resetuje sa“, keď sa posúvam nad prvým prvkom.