使用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); 
})