jQuery - 要素をアンカーリンクで上部の代わりに画面の中央にスクロール

Question

アンカーリンクを使用してさまざまなセクション要素にスムーズにスクロールする、固定位置のナビゲーションバーを使用して1ページのサイトを構築しています。要素へのスクロールのデフォルトの動作は、ブラウザウィンドウの上部に配置することです。代わりに、要素を画面の中央に揃えたいと思います。

私は、ナビゲーションのために、このマークアップを使用します。

<nav class="main-nav"> 
    <a href="#top">Top</a> 
    <a href="#section-1">Section 1</a> 
    <a href="#section-2">Section 2</a> 
    <a href="#section-3">Section 3</a> 
    <a href="#section-4">Section 4</a> 
    <a href="#section-5">Section 5</a> 
</nav> 

私はスクロールを滑らかにするためにkswedberg's jQuery Smooth Scroll pluginを使用しています。

$('.main-nav a').smoothScroll({ 
    offset: 0, 
    speed: 700 
}); 

私はそれが垂直方向に中央揃えていますように((window).height/2) - (element height/2)ようにオフセットを設定したいが、私はそれを正しく実行する方法を見つけ出すのに役立つ必要があります。私はこのようにそれを開始します。

私はそれを必要とする：

• 要素の高さを取得し、2
• ことによってそれを分割ウィンドウの高さを取得し、2
• で割り、後者
から、前者を引きます
• 可能な場合は、多くのANCHがあるので要素はウィンドウ

よりも高い場合には、デフォルトごとにトップにそれを揃えますまたはリンク私は、リンクのクリックされたアンカーリンクの要素の高さを確認するか、すべてのアンカーリンクに対してsmoothScrollを開始する必要があると仮定します。

誰でもこの方法を知っていますか？

Answer 1

APIは、要素にバインドされていないsmoothScrollを実行する方法を提供します。 アンカータグのonclickイベント内でこのメソッドを実行して、そのタグのターゲットにアクセスできるようにします。次に、あなたが望む位置に到達するために必要なものを計算することができます。 offsetは相対オフセットではなく絶対オフセットになっているので、スクロールするために正確な位置を取得する必要があります。

$('.main-nav a').on('click', function(e) { 
    var el = $(e.target.getAttribute('href')); 
    var elOffset = el.offset().top; 
    var elHeight = el.height(); 
    var windowHeight = $(window).height(); 
    var offset; 

    if (elHeight < windowHeight) { 
    offset = elOffset - ((windowHeight/2) - (elHeight/2)); 
    } 
    else { 
    offset = elOffset; 
    } 

    $.smoothScroll({ speed: 700 }, offset); 
    return false; 
}); 

Answer 2

ここscrollToを（使用したプレーンなjQueryを使ってそれを行う方法です）

$('.main-nav a').on('click', function(e) { 
    var el = $(e.target.getAttribute('href')); 
    var elOffset = el.offset().top; 
    var elHeight = el.height(); 
    var windowHeight = $(window).height(); 
    var offset; 

    if (elHeight < windowHeight) { 
    offset = elOffset - ((windowHeight/2) - (elHeight/2)); 
    } 
    else { 
    offset = elOffset; 
    } 
    var speed = 700; 
    $('html, body').animate({scrollTop:offset}, speed); 
}); 

これは、この質問からstrakerのコードとコードの組み合わせです：私は精通していないよjQuery scrollTo - Center Div in Window Vertically