jQueryでページトップへ

Yuuです。

前回に続き、jQueryネタです。 ページトップへっていうリンククリックしたときに滑らかに移動させます。 上に戻すだけの機能なら、jQueryのみで実現できます。

jQueryの読み込み

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

例にならい、jQueryを読み込みます。

html

1
2
3
<body class="top">
<p id="pageTop"><a href="#top">ページトップへ</a></p>
</body>

bodyにclassでtopを付けておきます。 Javascriptが無効のときもページ内リンクが有効になります。

Javascript

1
2
3
4
5
6
$(function(){
  $("#pageTop a").click(function(){
    $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
    return false;
  })
});

idで指定した「pageTop」内のアンカーリンクがクリックされた場合、スクロールでトップへ移動します。 スクロールのアニメーション部分は下記の指定。

1
animate(params, [duration], [easing], [callback])

duration

「slow」、「normal」、「fast」、「ミリ秒単位」、初期値は「normal」

easing

値の変化量を調節するカスタム関数の名前。 初期で設定できるのは「linear」と「swing」。初期値は「swing」

こちらを参考にさせて頂きました。 http://semooh.jp/jquery/api/effects/animate/params,+options/

プラグインを使う

jQueryではないけど、よく使うプラグイン。

Page Scrollerは高機能で、いろいろな動作設定が可能です。 ちなみに、スマートフォンでも動くはずです。

Comments