web-dev-qa-db-ja.com

マウスホイールで次のアンカーに自動スクロール

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

javascriptjqueryhtmlanchoranchor-scroll
8
Ogdila

これは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_を使用する必要があります。

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

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

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

25
Rick Hitchcock

iDの配列があるとしましょう。そうすると、次のようなことができます...

  var ancherList = ["id1","id2","id3"];
  var currentPosition = null;

  var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
  $(document).on(mousewheelevent,function(e){
      var scrollToAncher function (id,speed){
          spd = speed ? "slow" //deafult value for the animation speed
          var ancherTag = $("a[name='"+ id +"']");
          $('html,body').animate({scrollTop: ancherTag.offset().top},spd);
      }
      e.preventDefault();
      var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
      if (delta > 0){
          console.log("up")
          //check your current position and target id
          switch(currentPosition){
            case null :
            case ancherList[0] :
              scrollToAncher(ancherList[1]);
              currentPosition = ancherList[1];
              break;
            case ancherList[1] :
              currentPosition = ancherList[2];
              scrollToAncher(ancherList[2]);
              break;
            case ancherList[2] :
              currentPosition = ancherList[0];
              scrollToAncher(ancherList[0]);
              break;              
          }
      } else {
          console.log("down")
          //do the same for mouse wheel down
      }
  });

コードはテストされていません。構文エラーがあった場合は申し訳ありません

1
suish