1

ページの上部にボタンがあり、それが何であるかに関係なく、次のアンカーに進むようにコーディングしたいと思います。実際には、次/前のアンカーに移動するために次/前のボタンを実行したいと思います。このボタンは静的フレーム上にあるため、ページの残りの部分をスクロールするのが理想的です。

どんな提案も素晴らしいでしょう。繰り返しますが、アンカーが何であるかはわかりません。これは、一般的なボタンを使用したチャプターナビゲーションのようなものです。

domで次のアンカーオブジェクトを見つけて、実行可能なことがあるはずですが、私はそれを行うためのjqueryやjavascriptの専門家ではありません。

4

2 に答える 2

1 
var index = -1;

$('.next').click(function() {
   index++;
   $(window).scrollTop($('a').eq(index).position().top);

});
$('.previous').click(function() {
   index--;
   if(index < 0) { index = 0;}

   $(window).scrollTop($('a').eq(index).position().top);
});
于 2012-11-05T03:48:30.207 に答える
0

適切な解決策は、クラスを使用して「現在の」アンカーを設定し (おそらく、ページの最初のアンカーを class='current' でハード コードする)、jquery を使用して dom を通過し、次または前のアンカーを選択することです。「次へ」ボタンと「前へ」ボタンがあると仮定すると、次のようなことができます。

<script type="text/javascript">

  $('.next').click(function(e){
    e.preventDefault();
    var current_anchor = $('a.current');
    var next_anchor = current.next('a');
    $('body').animate({scrollTop:next_anchor.offset().top});
  })

  $('.previous').click(function(e){
    e.preventDefault();
    var current_anchor = $('a.current');
    var previous_anchor = current.prev('a');
    $('body').animate({scrollTop:previous_anchor.offset().top});
  })

</script>
于 2012-11-05T03:46:28.250 に答える