fullpage站点:在元素之间导航onclick with each loop

Question

我正在开发一个全页面网站，我制作了一个导航栏，但它还不能正常工作。按钮应将您带到下一个或上一个场景，第一个按钮应将你带到最后一个场景并将最后一个按钮带到第一个场景。最终，滚动将被完全禁用，唯一的导航将是这两个按钮(上一个和下一个(，但我现在对此进行了评论。

我在w3schools上发现了一些东西，我在上一次onclick函数中对此进行了评论。我似乎做不到。。如果能提供帮助，我们将不胜感激！

我做了一个代码笔。

$(".menu").on('click', function (event) {
event.preventDefault();
$(this).each(function (index) {
console.log(index);
if (this.hash !== "") {
var hash = this.hash;

$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function () {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}
});
});

Answer 1

尝试区分"上一个"；以及"；下一个"；按钮添加额外的类：

<a href="#" id="nav1" class="menu prev">Prev</a>
<a href="#" id="nav2" class="menu next">Next</a>

然后使用模运算符尝试以下逻辑：

if ($(this).hasClass('next')) {
var hash = "#scene-" + ((curr++ % sections) + 1);
} else {
curr = curr == 1 ? (sections + 1) : curr;
var hash = "#scene-" + (curr-- -1);
}
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function () {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});

完整的工作示例：

$.fn.isInViewport = function () {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).on('resize scroll', function () {
$('.scenes').each(function () {
var activeColor = $(this).attr('id');
if ($(this).isInViewport()) {
$('#fixed-' + activeColor).addClass(activeColor + '-active');
} else {
$('#fixed-' + activeColor).removeClass(activeColor + '-active');
}
var page = $("body");
var page_height = page.height();
var colorHere = page_height * 0.5;
if ($(window).scrollTop() > (page_height - colorHere)) {
$("a").css("color", "white");
} else {
$("a").css("color", "black");
}
});
});
var sections = 6;
var curr = 1;
$(".menu").on('click', function (event) {
event.preventDefault();
$(this).each(function (index) {
if ($(this).hasClass('next')) {
var hash = "#scene-" + ((curr++ % sections) + 1);
} else {
curr = curr == 1 ? (sections + 1) : curr;
var hash = "#scene-" + (curr-- -1);
}
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function () {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
});

.scenes{
position: relative;
width: 100vw;
height: 100vh;
}
#scene-1{
background-color: #f2f2f2;
}
#scene-2{
background-color: #ebd5d5;
}
#scene-3{
background-color: #ea8a8a;
}
#scene-4{
background-color: #685454;
}
#scene-5{
background-color: #af6b58;
}
#scene-6{
background-color: #cbbcb1;
}
/* navigatie */
.menu{
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
font-weight: 800;
text-transform: lowercase;
}
a:hover, a:visited, a:link, a:active{
text-decoration: none;
}

#nav1{
position: fixed;
top:0;
left:45%;
}
#nav2{
position: fixed;
top:90%;
left:45%;
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scene-1" class="scenes">
<h2 id="fixed-scene-1">1</h2>
</div>
<div id="scene-2" class="scenes">
<h2 id="fixed-scene-2">2</h2>
</div>
<div id="scene-3" class="scenes">
<h2 id="fixed-scene-3">3</h2>
</div>
<div id="scene-4" class="scenes">
<h2 id="fixed-scene-4">4</h2>
</div>
<div id="scene-5" class="scenes">
<h2 id="fixed-scene-5">5</h2>
</div>
<div id="scene-6" class="scenes">
<h2 id="fixed-scene-6">6</h2>
</div>
<a href="#" id="nav1" class="menu prev">Prev</a>
<a href="#" id="nav2" class="menu next">Next</a>