Прокрутите до кнопок NEXT / PREV с помощью Bootstrap ScrollSpy

Я просматривал ответы для создания кнопок «Далее» и «Назад», которые проходят через точки привязки на странице, но не смог найти то, что мне нужно. Это могло быть близко к тому, что я хотел, поэтому я решил использовать его в качестве отправной точки: Как сделать так, чтобы ссылка переходила к следующему якорю на странице, не зная имени якоря?

Я создал скрипку с концепцией, представленной в этом ответе, и попытался заставить ее работать вместе с 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>. Так что я изменил его соответствующим образом ... Мне кажется, что это близко? но я не могу сказать ...

Кто-нибудь может помочь? Спасибо!


javascript jquery twitter-bootstrap scrollspy
person JuicyBB    schedule 10.09.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Нацельтесь на активный 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);
})
person mildse7en    schedule 10.09.2014