指定位置にするするスクロール

公開日:2014年04月02日

JavaScript

最近のサイトでは当たり前のように実装されているするするスクロールをjQueryで書いてみる。

基本：ページトップへ戻る

<a id="pagetop" href="#">ページトップへ戻る</a>

リンクにid「pagetop」をつける

$(function(){
    $('#pagetop').on('click', function(){
        $('html,body').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

ページトップリンクがクリックされたらanimateで<html>もしくは<body>のスクロールトップ「0」位置まで500ミリ秒かけて移動。
ちなみに「$(‘html,body’)」は決まり文句でブラウザやモードによって「html」が使われたり「body」が使われたりするから両方指定しとけよ。ってことらしい。

最期にa要素のブラウザ標準の挙動を「false」でキャンセル。

応用：任意の位置に移動

<a id="move_target" href="#target_point">任意の位置に移動</a>
　　：
<div id="target_point">移動したい要素</div>

「scrollTop: 0」がページ最上部なので、移動したい要素がページ上部から何ピクセルの位置にあるのかoffsetメソッドで取得して指定する。

$(function(){
    $('#move_target').on('click', function(){
        var targetTop = $('#target_point').offset().top;
        $('html,body').animate({
            scrollTop: targetTop
        }, 500);
        return false;
    });
});

ちなみにoffsetメソッドはその要素の上部位置（top）と左側位置（left）の値をもったオブジェクトを返す。
なので、左右にも移動させたい場合は以下のように記述。

$(function(){
    $('#move_target').on('click', function(){
        var targetTop = $('#target_point').offset().top;
        var targetLeft = $('#target_point').offset().left;
        $('html,body').animate({
            scrollTop: targetTop,
            scrollLeft: targetLeft
        }, 500);
        return false;
    });
});

以上がベースとなるプログラムで要素の下部に移動したいなら「offset().top」に要素の高さを足したり、要素の右側に移動したいなら「offset().left」に要素の幅を足したりして対応かな。
offsetメソッドがtop値をleft値しか返さないので・・・。

コンテンツ一覧

同じカテゴリーのコンテンツ