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

Question

我正在查看有关创建通过页面上 anchor 的下一个和上一个按钮的答案，但找不到我需要的东西。这可能接近我想要的，所以我决定用它作为起点:How can I make a link go to the next anchor on the page without knowing anchor name?

我用那个答案中提出的概念创建了一个 fiddle ，并试图让它与 bootstrap 的 scrollspy(检测当前部分和 anchor )一起工作。

我已经走到这一步了: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类到 <li>包装 <a> 的标签标签。所以我相应地改变了它......我觉得它很接近？但我不能说...

有人可以帮忙吗？谢谢!

Answer 1

定位事件 li，找到上一个/下一个 li，并向下钻取 anchor 。

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