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

トップページ > 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;
}

こんな感じです。

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

記事移動

関連記事

ロード時やスクロール時にふわっと表示させるjQuery

ロード時やスクロール時にふわっと表示させるjQuery

facebookページの投稿一覧をGraphAPIとjQuery(json)で表示してみる

jQueryで特定のパラメータの値を取得する関数

jQueryで特定のパラメータの値を取得する関数

jQueryでページ内リンクをスムーススクロールさせる方法

jQueryでページ内リンクをスムーススクロールさせる方法

CSSとjQueryで作るメニュー表示時にコンテンツのスクロールをさせないドロワーメニュー

レスポンシブ対応・スワイプ可能な多機能スライドショーjQueryプラグイン「Slider Pro」

レスポンシブ対応・スワイプ可能な多機能スライドショーjQueryプラグイン「Slider Pro」

Comment Form

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

ユーティリティ

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

プロフィール

author:I'll be NET

since:2014.01.01

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

more

Feed