jQueryのscrollTopで該当要素までスクロールするときに該当要素がウインドウの中心にくるようにスクロールさせる

要素のoffset().topの値でスクロールさせると要素が画面の上端にくるんだよな…

まあ別にこれでもいいんだけどなーーーーーーんだかしっくりこない

スクロールしたときに要素がウインドウの真ん中にくるようにしたいなあ.

↑の問題を解決していきます。

※いまから解説していきますがコードをうのみにせず理解した上でつかってください。またコードにミスがある、あるいは筆者がなにか勘違いしている部分もあるかもしれません。

要素の位置までスクロールする

通常は以下のような処理になると思います

$("btn").click(function() {
    $("html, body").animate({
        scrollTop: $("#element").offset().top
    });
});

offsete().topでドキュメントの上端から要素の上端の距離を指定します。これでクリックイベントでスクロールさせると、要素はウインドウの上端に位置した状態でスクロールします（ちょっと表現がおかしいかもしれませんが実際やってみればわかります）

これでもいいんですが、たとえばテキストエリアにスクロールさせたい場合にテキストエリアが上端にくると少しおかしく感じる場合があります。ですので要素がウインドウの中心にくるようにスクロールさせます。

要素の位置までスクロールするがウインドウの中心にくるようにスクロールさせる

要素がウインドウの中心にくるようにスクロールさせるには、elementの位置からelementの高さ分を追加しウインドウ高さ/2をマイナスします。

わかりにくいと思いますので式を書いておきます。

実際のコード↓

$("btn").click(function() {
    var windowHeight = $(window).height(); // ウィンドウの高さ
    var elemetHeight = $("#elemet").outerHeight(); // #elemetの高さ（内容と余白を含む）
    var elemetOffset = $("#elemet").offset().top; // #elemetのオフセット位置
    
    //スクロールで該当要素をウインドウの中心に位置させる  
    var scrollTo = elemetOffset + elemetHeight - (windowHeight/2); 

    $("html, body").animate({
        scrollTop: scrollTo
    });
});

スクロールしたときに完全に中心に位置させる

実をいうとさきほどのは中心といえば中心にくるのですが、要素全体をウインドウの中心に配置させたい場合は式がかわります。

var scrollTo = elemetOffset + elemetHeight - (windowHeight/2) + (elemetHeight/2);

これにかんしては文章で書くとややこしくなるので実際のコードで確認してください

まとめ

ややこしいですが、別にそんなに難しい処理はしていません。