使用Bootstrap ScrollSpy滾動到NEXT/PREV按鈕

Question

我正在查看創建通過頁面上的定位點的next和prev按鈕的答案，但找不到我需要的東西。這一個可能已經接近我想要的，所以我決定用它作爲一個起點：How can I make a link go to the next anchor on the page without knowing anchor name?

我創建了一個小提琴，該答案中提出的概念，並試圖使它與bootstrap的scrollspy一起工作（檢測當前部分和錨點）。

我有這個迄今爲止得到：http://jsfiddle.net/gukne0oL/2/

$('.next').click(function (e) { 
    e.preventDefault(); 
    var current_anchor = $('li.active a'); 
    var next_anchor = current.next('li a'); 
    $('body').animate({ 
     scrollTop: next_anchor.offset().top 
    }); 
}) 

$('.previous').click(function (e) { 
    e.preventDefault(); 
    var current_anchor = $('li.active a'); 
    var previous_anchor = current.prev('li a'); 
    $('body').animate({ 
     scrollTop: previous_anchor.offset().top 
    }); 
}) 

原來答案瞄準<a>標籤，但在引導的scrollspy，它增加了active類爲<li>標籤包裹<a>標籤。所以我相應地改變了它......我覺得它很接近？但我不知道...

任何人都可以幫忙嗎？謝謝！

Answer 1

目標活動li，找到上一個/下一個li，並深入到錨點。

http://jsfiddle.net/gukne0oL/9/

// Activate bootstrap scrollspy 
$('body').scrollspy({ 
    target: '.navbar' 
}) 

$('.next').click(function (e) { 
    var next = $('.navbar ul li.active').next().find('a').attr('href'); 
    $('html, body').animate({ 
     scrollTop: $(next).offset().top 
    }, 500); 
}) 

$('.previous').click(function (e) { 
    var prev = $('.navbar ul li.active').prev().find('a').attr('href'); 
    $('html, body').animate({ 
     scrollTop: $(prev).offset().top 
    }, 500); 
})