jqueryのanimateでページ内スクロールをお手軽に実行しちゃおう

この記事はだいぶ前に書かれたものなので情報が古いかもしれません

jqueryを使ったページ内のスムーズなスクロール、移動ってのは、いろいろな人がいろいろなプラグインを公開しているおかげでよりどりみどりの風見鶏なわけですが、ごくごくシンプルなページ内スクロールでよければ、プラグインの力を借りなくても、ほんの数行で実現することができちゃいます。

イケてるスクロールを導入したいんだけど、プラグインが多過ぎて逆にどれを使ったら良いのか分からへん、もう全然選べへん、阿片でもキメないとどうにもならへんってときには、思いきって自分で書いてみちゃうのもありかもしれまへん。

いや、阿片はキメちゃダメだ。

とりあえずコードを書いてみる

例えば今、こんな感じのHTMLがあるとしましょう。

<html>
<body>
<a href="#" title="div1">div1へ</a>
<a href="#" title="div2">div2へ</a>
<a href="#" title="div3">div3へ</a>

<div id="div1">aaaaa</div>
<div id="div2">bbbbb</div>
<div id="div3">ccccc</div>
</body>
</html>

実際この程度のHTMLだったらスクロールをすることはないわけですが、今、各divは500pxくらいずつ離れていることにしましょう。margin-top:500pxな感じ。

ここで今、div3のidを持つdivのところまで移動したい。それもウォータースライダーを滑り降りるようにスムーズに移動したい。

そんなときは、こうしましょう。

<script>
$('a').click(function(){
    var div = $('#'+this.title).offset();
    $('body,html').animate({
        scrollTop: div.top
    }, 1000);
});
</script>

たったの６行。お手軽簡単。書き方しだいでは４行くらいになるね。３行でもいけるな。いや、そんなこと言い出したら１行に全部書いちゃってもいいんだけどさ。

offset()ってやつで、要素の位置を取得しています。例えばdiv1がページの上から500pxのところにあるなら、上のコードの中でのdiv.topってやつには500が入ってる。あとはその高さまで1000ミリ秒かけて移動するって感じですね。

実践編

あかつきのお宿でも、よくある質問のページはこれで動かしてます。idとか割り振るのめんどいから、もうちょい違うやり方してますけどね。

//HTML
<a href="javascript:void(0)">Q. 上手く表示されないんだけど？</a>
<a href="javascript:void(0)">Q. IE8だけど見れないよ？</a>

…

<div class="faq">
    <h3>Q. 上手く表示されないんだけど？</h3>
</div>

<div class="faq">
    <h3>Q. IE8だけど見れないよ？</h3>
</div>

…

//javascirpt
$('#static a').click(function(){
    var index = $(this).index('#static a');
    var pos = $('.faq:eq('+index+')').offset();

    $('body,html').animate({
        scrollTop: pos.top
    }, 500);
    return false;	
});

jqueryでは条件に合う要素のインデックスを取得することができます。上の例だと$(this).index(‘#static a’)ってのがそうですね。

staticというidを持った要素の中にあるaタグの中で、今クリックされたタグは何番目かなってのが、これで分かります。ちなみにインデックスは1じゃなくて0から振られるので、最初のタグは0番目ってことになります。

これで上から何番目のリンクが押されたかが分かるので、それを使って上から何番目かのdiv（faqというクラスが振られているdiv）のoffset()を取得するって寸法っすね。これならいちいち要素を追加したときにidを振り直したりしなくて良くなるから、汎用性が高い？　ような？　気がする？

もっと複雑なアニメーションを実現したいなら物足りないですけど、シンプルなので良ければ、この程度でいけます。

良かったら、お試しあれ。

そしてこのページを見てくれた人に、幸あれ。

あれ

あかつきのお宿

とりあえずコードを書いてみる

実践編

JavaScript 開発技術

JavaScript 開発技術

JavaScript 開発技術

JavaScript 開発技術

JavaScript 開発技術

JavaScript 開発技術