整页站点：在每个循环中点击元素导航

Question

我正在制作一个全页网站并制作了一个导航栏，但它还不能正常工作。按钮应带您到下一个或上一个场景，第一个按钮应带您到最后一个场景，最后一个按钮应带您到第一个场景。最终，滚动将被完全禁用，唯一的导航将是这两个按钮（上一个和下一个），但我暂时将其注释掉。

我在 w3schools 上找到了一些东西，我在上一个 onclick 函数中注释掉了它。我似乎无法完成这项工作.. 非常感谢您的帮助！

I made a codepen.

$(".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>

整页站点：在每个循环中点击元素导航

fullpage site: navigating through elements onclick with each loop

javascript

jquery

loops

click

each