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'); 
     }); 

但它只能做的就是順利地滾動（頁內鏈接），下一步按鈕它不工作，我不知道接下來要做的事情。我喜歡這個site的這種效果，因爲它給訪客在他/她是什麼內容的想法，因爲菜單有active state也next和prev按鈕與menu協調，更好地工作，

這裏我目前FIDDLE

希望這使得SENSE

Answer 1

我已經更新你的標記和腳本來做你想做的。其中一個主要問題是您在prev &下一個按鈕上使用了相同的類名...

更新的腳本使用單個函數來控制滾動。各種按鈕更新項目索引以滾動到，然後調用該功能。

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>