2014/01/10

jQueryを利用して,任意の場所にスクロールして移動する方法

jQueryを利用して,任意の場所にスクロールして移動する方法

開閉式のメニュー等を使用している場合や記事が長くなってしまった場合など,スクロール量が増えてしまい,結果的にユーザーに余計なスクロールをさせてしまいます.

任意の要素の位置までスクロールすれば,そういった手間を省け,ユーザビリティ向上につながるほか,見た目にも動きが出せます.

今回は,クリックした要素の位置を取得して,その要素の位置までスクロールする方法を紹介します.

目次

要素の位置取得

まず,スクロールさせるためには,目的地となる座標,つまりスクロール先の要素の位置を取得する必要があります.

var position = $("任意の要素").offset().top;

これで,変数position要素の位置(Y座標)を取得することが出来ます.

スクロール動作の実装

次に,スクロール動作を実装します.

スクロール動作は,jQueryのアニメーション動作で行うことにします.

$("html,body").animate({
	scrollTop : position
}, {
	queue : false
});

このように記述します.

クリックイベントに関連付けたい場合は,以下のように記述します.

$(任意の要素).click(function(){
    $("html,body").animate({
        scrollTop : position
    }, {
        queue : false
    });
});

サンプル

サンプルを用意しましたので,体験してみてください.

まとめ

結構簡単に実装出来るコトがお分かりいただけたかと思います.Topへ戻るボタンや,長くなりがちなスマートフォンの開閉式メニューなどと組み合わせて使用するといいと思います.