使用Bootstrap ScrollSpy滚动到NEXT / PREV按钮

Question

我正在寻找创建下一个和上一个按钮的答案，这些按钮通过页面上的锚点，但找不到我需要的东西。 这个可能接近我想要的，所以我决定用它作为一个起点： 如何在不知道锚名称的情况下将链接转到页面上的下一个锚点？

我用这个答案中提出的概念创建了一个小提琴，并尝试使它与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>标签为目标，但在bootstrap的scrollspy中，它将active类添加到包含<a>标签的<li>标签中。 所以我相应改变了......我觉得它很接近？ 但我不能说......

有人可以帮忙吗？ 谢谢！

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