アクティブなリンクに従って水平方向にスクロールします

Question

jQueryを使用してスクロールをアクティブなリンクに従って水平に配置するにはどうすればよいですか？

水平スクロールを有効にするためにoverflow-x: scroll;を使用していますが、アクティブリンクに従ってスクロールを中央に揃えたいと思っていました。

これは私が達成しようとしているものです：

Example

$(document).ready(function() { 
    $('a[href^="#"]').on('click', function (e) { 
     e.preventDefault(); 
     $(document).off("scroll"); 

     $('a').each(function() { 
      $(this).removeClass('active'); 
     }) 
     $(this).addClass('active'); 
    }); 
}); 

function onScroll(event){ 
    $('#menu-center a').each(function() { 
     var currLink = $(this); 
     var refElement = $(currLink.attr("href")); 
     currLink.removeClass("active"); 
    }); 
} 

Answer 1

は、私の知る限り、あなたがページに着陸するときに自動的にスクロールするにはJavaScriptを使用する必要があります。あなたはあなたがそれをしたい場所、それが停止するように取得するmyScrollPosを調整することができます...

$(document).ready(function() { 
    $('a[href^="#"]').on('click', function (e) { 
     e.preventDefault(); 
     $(document).off("scroll"); 

     $('a').each(function() { 
      $(this).removeClass('active'); 
     }) 
     $(this).addClass('active'); 
     var myScrollPos = $('a.active').offset().left + $('a.active').outerWidth(true)/2 + $('.menu').scrollLeft() - $('.menu').width()/2; 
     $('.menu').scrollLeft(myScrollPos); 
    }); 
}); 

ような何かを行うことができ、これはあなたのアクティブなボタンの左側にスクロールさせる必要があります。下の内訳！

$('a.active').offset().left + $('a.active').outerWidth(true)/2 

これは、この場合には、それがに記載された要素の可視エッジから私たちにメニューをボタンの距離を取得しますが、その後、代わりにボタンの中心であることを返された値を取得するために半分のボタンの幅を減算しますはしっこ。ここから私たちは、ミックスに私たちは、メニュー項目の左からの距離、プラス現在のスクロール位置を取得し、そのように

+ $('.menu').scrollLeft() 

を追加するように、それは、親で行われています任意のスクロールが含まれていません。この2つの組み合わせにより、各ボタン間の一貫したスクロール座標が得られます。

- $('.menu').width()/2 

メニューの幅の1/2をスクロールして効果的にボタンを中央に配置します。

*最終解決版で更新されました。