I'll be NET】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > JavaScript/jQuery > 必ず使うページ上部に戻るスムーススクロール用jQuery

必ず使うページ上部に戻るスムーススクロール用jQuery

必ず使うページ上部に戻るスムーススクロール用jQuery

サイトを設置する時必ず設置するページ上部に戻るスムーススクロールの記事を書いていなかったので書いておきます。

HTML

<div id="page-top">
    <a href="#top">PAGETOP</a>
</div>

たとえばこんな簡単なソースがあったとしたら、

Javascript

$(function(){
// TOPに戻るボタン
    var topBtn = $('#page-top');
    topBtn.hide();

    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        var w = $(window).width();
        if ($(this).scrollTop() > 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });

    //スムーススクロールでページトップへ
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

CSS

#page-top{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
}
#page-top a{
    border-radius: 50%;
    background: #006e9f;
    color: #fff;
    line-height: 50px;
    text-decoration: none;
}

こんな感じです。

画面遷移後すぐには表示されませんが、画面をスクロールすると画面右下にふわっと表示されます。

この記事が気に入ったらシェアしてください。

関連記事

【初心者向け】これだけわかっていればいいJavascriptとjQuery簡単な違いや使い方

【初心者向け】これだけわかっていればいいJavascriptとjQuery簡単な違いや使い方

jQuery(Ajax)でhtmlに別のhtmlで書かれた共有パーツをincludeする方法

jQuery(Ajax)でhtmlに別のhtmlで書かれた共有パーツをincludeする方法

Instagramの写真一覧をサイトに表示する方法

Instagramの写真一覧をサイトに表示する方法

サムネイル画像をクリックするとメイン画像をふわっと切り替えるjQuery

HTML上の要素の位置を変更するjQuery

HTML上の要素の位置を変更するjQuery

JavaScriptで現在のURLを取得する方法

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

Profile

yuricolo@I'll be NET

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。