カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

ページのトップへスクロールする

この記事は最終更新日から1年以上経過しています。

現在のページのトップへスクロールする小技です。
jQueryを使って実装します。

JavaScriptライブラリをダウンロード
jQuery

まずheadタグ内でjQueryライブラリを読み込みます。

<script type="text/javascript" src="./lib/jquery-1.7.2.min.js"></script>

bodyタグにIDを付けます

<body id="top">

ID付のdivタグで括ってリンクを作成します。

<div id="to_pagetop">
    <a href="#top">上に戻る</a>
</div>

最後に任意の場所に以下のコードを記述します。

<script type="text/javascript">
<!--//
$(function(){
    $("#to_pagetop a").click(function(){
    $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow', 'swing');
    return false;
    })
});
//-->
</script>
この記事がお役に立ちましたらシェアお願いします
1,321 views

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です