整页网站：在每个循环中浏览元素 onclick

如何解决整页网站：在每个循环中浏览元素 onclick

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

我在 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;

      });
    }
  });
});

解决方法

尝试通过添加其他类来区分“上一个”和“下一个”按钮：

<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
      },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,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>