10

HTML ページに 5 つのアンカーがあります。マウスホイールを 1 回スクロールするだけで、ページが次のアンカー (#) に自動的にスクロールする方法はありますか? アンカーの名前に関係なく発生する方法はありますか? 次のアンカーまで。

4

2 に答える 2

27

これは、Chrome、IE、Firefox、Opera、および Safari で機能します。

(function() {
  var delay = false;

  $(document).on('mousewheel DOMMouseScroll', function(event) {
    event.preventDefault();
    if(delay) return;

    delay = true;
    setTimeout(function(){delay = false},200)

    var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

    var a= document.getElementsByTagName('a');
    if(wd < 0) {
      for(var i = 0 ; i < a.length ; i++) {
        var t = a[i].getClientRects()[0].top;
        if(t >= 40) break;
      }
    }
    else {
      for(var i = a.length-1 ; i >= 0 ; i--) {
        var t = a[i].getClientRects()[0].top;
        if(t < -20) break;
      }
    }
    if(i >= 0 && i < a.length) {
      $('html,body').animate({
        scrollTop: a[i].offsetTop
      });
    }
  });
})();

http://jsfiddle.net/t6LLybx8/728/のフィドル

使い方

ほとんどのブラウザーでマウス ホイールを監視するには、 を使用します$(document).on('mousewheel')。Firefox は変わり者で、$(document).on('DOMMouseScroll').

マウス ホイールの方向 (上または下) を取得するには、 を使用しますevent.originalEvent.wheelDelta。繰り返しますが、Firefox は変わり者であり、使用する必要があります-event.originalEvent.detail。

方向が負の数の場合、ページを下にスクロールしています。その場合、最初の で始まる各タグを、最初の上部が >= 40になるまでループしますgetClientRects()(ブラウザーがビューポートの上部にデフォルトのマージンを追加する場合に備えて、40 を使用しました)。

方向が正の数の場合、ページを上にスクロールしています。その場合、最初のトップが < -20になるまで、最後のタグで始まる各タグをループします。getClientRects()(ページを上に移動するために -20 を使用しました。)

このdelay変数は、マウス ホイールのスクロールが速すぎるのを防ぎます。関数全体がクロージャでラップされているためdelay、プライベート変数のままです。

于 2014-09-15T01:59:44.487 に答える