3

ページ上のアンカー ポイントを通過する次へボタンと前へボタンを作成するための回答を探していましたが、必要なものが見つかりませんでした。これは私が望んでいたものに近いかもしれないので、出発点として使用することにしました:アンカー名を知らなくてもページの次のアンカーへのリンクを作成するにはどうすればよいですか?

その回答で提示された概念でフィドルを作成し、ブートストラップの 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クラスを追加します。ということで適宜変更… 近い感じ？しかし、私にはわかりません...<li><a>

誰でも助けることができますか？ありがとうございました！

4

1 に答える 1

3

アクティブな 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);
})
于 2014-09-10T18:59:16.413 に答える