Прокрутите до СЛЕДУЮЩИХ/ПРЕДЫДУЩИХ кнопок с Bootstrap ScrollSpy

Question

Я искал ответы для создания кнопок next и prev, которые проходят через опорные точки на странице, но не могли найти что-то, что мне нужно. Это могло быть близко к тому, что я хотел, поэтому я решил использовать его в качестве отправной точки: How can I make a link go to the next anchor on the page without knowing anchor name?

Я создал скрипку с концепцией, представленной в этом ответе, и попытался заставить ее работать вместе с 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 Bootstrap, он добавляет 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); 
})