jquery - 页面内滚动平滑链接，带有按钮 next 和 prev

Question

我找到了这个site，我想要它的工作方式，但不幸的是我对 jquery 的了解较少，但我知道如何进行简单的修改以使其工作，

我当前的js代码在这里：

$(".fadeScroll").click(function (event) {
          event.preventDefault();
          //calculate destination place
          var dest = 0;
          if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
              dest = $(document).height() - $(window).height();
          } else {
              dest = $(this.hash).offset().top;
          }
          //go to destination
          $('html,body').animate({
              scrollTop: dest
          }, 2000, 'swing');
      });

但它只能平滑滚动（inpage Links），下一个按钮不起作用，我不知道下一步该做什么。我喜欢这个site 的效果，因为它给访问者关于他/她是什么内容的想法，因为菜单有active state 还有下一个和上一个按钮与menu 协调并且工作得很好

这里是我当前的FIDDLE

希望这有意义

Answer 1

我已经更新了你的标记和脚本来做你想做的事。主要问题之一是您在上一个和下一个按钮上使用了相同的类名...

更新后的脚本使用单个函数来控制滚动。各种按钮更新项目索引以滚动到，然后调用该函数。

here's your updated fiddle。 和你更新的 JS。

var itemIndex = 1;
function scrollToContent() {

    //dont allow zero or greater than 5
    if (itemIndex <= 1) {
        itemIndex = 1;
        $('#fade').hide();
    }
    else{
        $('#fade').show();
    }
    if (itemIndex >= 5) {
        itemIndex = 5;
        $('#fade1').hide();
    }
    else{
        $('#fade1').show();
    }
    //scroll
    $('html, body').animate({
        scrollTop : $('#content' + itemIndex).offset().top
    }, 2000);
    //add & remove active class name
    $('button.active').removeClass('active');
    $('.navigation li:nth-child(' + itemIndex + ') button').addClass('active');
}

//click handlers
function clickFuncs() {
    $(".navigation button").click(function() {
        itemIndex = $(this).attr('data-index');
        scrollToContent();
    });

    $('#fade1').click(function() {++itemIndex;
        scrollToContent();
    });

    $('#fade').click(function() {--itemIndex;
        scrollToContent();
    });
}


$(document).ready(function() {

    //setup click handlers
    clickFuncs();

});

更新的 HTML

<ul class="navigation">
<li><button data-index="1">content1</button></li>
<li><button data-index="2">content2</button></li>
<li><button data-index="3">content3</button></li>
<li><button data-index="4">content4</button></li>
<li><button data-index="5">content5</button></li>    
</ul>

<p class="buttons">
   <button id="fade">prev</button>
   <button id="fade1">next</button> 
</p>