jQuery根據部分的索引滾動到章節

Question

嗨，我希望我解釋得很好，爲答案。

我已經創建了一個頁面的側面導航，並創建了一個簡單的jQuery腳本來動態添加基於頁面上的節數的按鈕，這很好。

所以我想要做的是，當點擊導航上的鏈接時，它對應於該部分的索引並滾動到該部分。

例如，如果第二個鏈接被點擊它進入第2節

這晚，我可能失去了一些東西，但似乎無法通過該按鈕（列表項）的索引該部分的索引。

我可能會離開英里，所以要溫柔，第一次嘗試這樣的事情。

jQuery(document).ready(function($) { 
var $section = $('section').length; 
var $nav = $('.side-navigation li').length; 
//************************************************************************************// 
//Dynamically add navigation buttons to side navigation dependant on number of sections 
//************************************************************************************// 
for(var i=0; i <= $section; i++); 
$('section').each(function() { 
    $('.side-navigation').append('<li><a href="#"></a></li>'); 
}); 
//************************************************************************************// 
//Scrolls to section corresponding with the index of the link 
//************************************************************************************// 
$('.side-navigation li').click(function(){ 
     var index = $('.side-navigation li').index(this); 
     console.log('this is index number' + " " + index); 
     $('html, body').animate({ 
      scrollTop: $('section[i]').offset().top 
     }) 
    }); 
//************************************************************************************// 
//End 
//************************************************************************************// 

}）;

Answer 1

我現在已經工作了，未必是最優雅的，但給我的東西上工作：

這是我目前的解決方案：

jQuery(document).ready(function($) { 
var $section = $('section').length; 
var $nav = $('.side-navigation li').length; 
//************************************************************************************// 
//Dynamically add navigation buttons to side navigation dependant on number of sections 
//************************************************************************************// 
$('section').each(function() { 
    $('.side-navigation').append('<li><a href="#"></a></li>'); 
}); 
//************************************************************************** 
//Dynamically add a unique class for each section for nav to target 
//************************************************************************** 
$('section').each(function(i) { 
    $(this).addClass('section' + (i)); 
}); 
//************************************************************************************// 
//Scrolls to section corresponding with the index of the link 
//************************************************************************************// 
$('.side-navigation li').click(function(){ 
     var index = $('.side-navigation li').index(this); 
     $('html, body').animate({scrollTop: $('.section' + (index)).offset().top}) 
    }); 
//************************************************************************************// 
//End 
//************************************************************************************// 
});