jQueryスクロールでdivに移動し、最初の要素に戻る

Question

私は基本的に、寸法が設定されたdivとoverflow: hiddenを持っています。そのdivには7つの子divが含まれていますが（ただし、一度に1つしか表示されません）、それぞれのリンクが上がったときに垂直にスムーズにスクロールしたいと考えています。

ただし、最初のセクション（div）にはリンクがなく、リンクがない場合のデフォルトセクションです。私はjQueryのscrollToでこれを実現しようとしましたが、それは仕事を得ることができていないhttp://jsfiddle.net/YWnzc/

：

は私が話しているかの基本的な構造を表示するには、このjsFiddleを見てみましょう。

ご協力いただければ幸いです。ありがとう。

Answer 1

このようなものはありますか？

http://jsfiddle.net/YWnzc/5/

コード：

jQuery("#nav").delegate("a", "mouseenter mouseleave", function (e) { 
    var i, self = this, 
    pos; 

    if (e.type == "mouseleave") { 
    i = 0; 
    } 
    else { 
    //Find out the index of the a that was hovered 
     jQuery("#nav a").each(function (index) { 
      if (self === this) { 
      i = index + 1; //the scrollTop is just calculated from this by a multiplier, so increment 
      return false; 
      } 
     }); 
    } 

    //Find out if the index is a valid number, could be left undefined 
    if (i >= 0) { 

     //stop the previous animation, otherwise it will be queued 
     jQuery("#wrapper").stop().animate({ 
     scrollTop: i * 200 
     }, 500); 
     //I would retrieve .offsetTop, but it was reporting false values :/ 
    } 

    e.preventDefault(); 
}); 

Answer 2

FYI：あなたが私にJSFIDDLEを送って、jQuery ... fyiではなくMooToolsフレームワークに行ってきたことをお伝えしました。 ？（そのが

コピーを働いていない理由も及び、まさにこのコードを貼り付け、それがアニメーションのスクロールにはjQueryで動作するかもしれません

をDIV内でスムーズなスクロールのためにこれを試してみて、私はそれをテストした - 。それは素晴らしい作品あなたは。

FYI

$(function() { 

    function filterPath(string) { 
     return string 
     .replace(/^\//,'') 
     .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
     .replace(/\/$/,''); 
    } 

    var locationPath = filterPath(location.pathname); 
    var scrollElem = scrollableElement('#wrapper'); 

    // Any links with hash tags in them (can't do ^= because of fully qualified URL potential) 
    $('a[href*=#]').each(function() { 

     // Ensure it's a same-page link 
     var thisPath = filterPath(this.pathname) || locationPath; 
     if ( locationPath == thisPath 
      && (location.hostname == this.hostname || !this.hostname) 
      && this.hash.replace(/#/,'')) { 

       // Ensure target exists 
       var $target = $(this.hash), target = this.hash; 
       if (target) { 

        // Find location of target 
        var targetOffset = $target.offset().top; 
        $(this).click(function(event) { 

         // Prevent jump-down 
         event.preventDefault(); 

         // Animate to target 
         $(scrollElem).animate({scrollTop: targetOffset}, 400, function()  { 

          // Set hash in URL after animation successful 
          location.hash = target; 

         }); 
        }); 
       } 
     } 

    }); 

    // Use the first element that is "scrollable" (cross-browser fix?) 
    function scrollableElement(els) { 
     for (var i = 0, argLength = arguments.length; i <argLength; i++) { 
      var el = arguments[i], 
      $scrollElement = $(el); 
      if ($scrollElement.scrollTop()> 0) { 
       return el; 
      } else { 
       $scrollElement.scrollTop(1); 
       var isScrollable = $scrollElement.scrollTop()> 0; 
       $scrollElement.scrollTop(0); 
       if (isScrollable) { 
        return el; 
       } 
      } 
     } 
     return []; 
    } 

}); 

：私は少しのコードを微調整でしたが、このコードのためのクレジットは、個々の開発者として私に行かない、このコードの所有者と作成者がクリスCoyierであり、あなたはこのスクロールコードについての詳細を見つけることができます。ここ： http://css-tricks.com/snippets/jquery/smooth-scrolling/

Answer 3

$("#nav a").hover(function() { 
    var sectionName = $(this).attr("href"); 
    var sectionPos = $(sectionName).offset().top; 
    var wrapperPos = $("#wrapper").offset().top; 
    var wrapperScroll = $("#wrapper").scrollTop(); 
    var scrollPos = sectionPos - wrapperPos + wrapperScroll; 
    $("#wrapper").stop().animate({scrollTop:scrollPos}, 600); 
}, function() { $("#wrapper").stop().animate({scrollTop:0}, 600); }); 

Answer 4

ここで働い例です：http://jsfiddle.net/YWnzc/7/

そして（私が説明しましょうカップルの変更でrizzle年代にかなり似て、）コード：

$('a').hover(function(){ 
    var selector = $(this).data('section'); 
    var scrollAmount = $(selector).offset().top + $('#wrapper')[0].scrollTop - 129; 
    $('#wrapper').animate({scrollTop: scrollAmount}, 250); 
},function(){ 
    $('#wrapper').animate({scrollTop: 0}, 250); 
}); 

まず、var selector = $(this).data('section');be jsFiddleでause、href属性はページのフルパス+ハッシュを返していました。そこで、html5データ属性（data-section）に変更しました。

次の行は、セクションのオフセットを取得し、現在のscrollTopの値である#wrapperに追加する点を除いて、rizzle'sに似ています。彼が指摘したように、奇妙な相殺問題がまだ進行中です。129を引いたことがそのトリックでした。この129の数字は壊れそうなもののように思えるかもしれませんが、私はセクションのサイズを変えてテストして、等しくないようにしました。私はChromeを使用していますが、Webkit以外のブラウザでは、別の定数を減算する必要があります。しかし、129の数字は、少なくともある種の定数であるように見えます。

残りはかなり自明です。

もう一つ注意すべき：あなたは<a>タグの上にカーソルを移動すると、#wrapperのdivの内容は、周りにジャンプするように見えるだろうが、ホバリングイベントのmouseleave一部を簡単にカーソルを移動するとトリガーされますので、それはただのです。私はあなたがそれを解決することができると確信しています:)