スクロールしたら浮き出てくる「ページトップへ」のボタンを設置

公開日: : 最終更新日:2014/11/05 Web

jQuery

ページ下部までスクロールした時、
ページトップへのリンクが出てくるようにするときのメモ。

最近どのサイトにもついてますね。

Mori2ndLabさんのサイトが一番わかり易いです。


jQueryのファイルを読み込む

まずはjQueryを読み込み。

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


jQueryの動作部分を記入

こちらもヘッダーに記入。

<script type="text/javascript">
$(function() {
    var topBtn = $('.backtotop');    
    //最初はボタンを隠す
    topBtn.hide();
    //スクロールが300に達したらボタンを表示させる
    $(window).scroll(function () {
        if ($(this).scrollTop() > 300) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スクロールしてトップに戻る
    //500の数字を大きくするとスクロール速度が遅くなる
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});
</script>


トップに戻るボタンを設置

浮き出てくるトップに戻るボタンを設置。
画像にしたい方はここに画像のURLを。
私はヘッダータグのすぐあとに設置。
headerとbodyの間にいれました。

<div class="backtotop" align="center">
<a href="#header">トップに<br>戻る</a>
</div>


cssでボタンを見栄え良く

上記は画像じゃなく文字でいれたので、
それを見栄え良く。
もうMori2ndLabさんで紹介されている
デザインがすばらしいのでそのまんま。

.backtotop {
    position: fixed;
    right: 15px;
    bottom: 20px;
    z-index: 9000;
    display: none;
}    

.backtotop a {
    display: block;
    color: #777777;
    padding: 14px 6px;
    margin: 0;
    background-color: #DDDDDD;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
}

.backtotop a:hover {
    background: #666666;
    color: #FFFFFF;
}


これだけです。

ad

関連記事

Web

スクロールしてもついてくるソーシャルボタンたち

今更な感満載の内容ですが... 育児の合間をぬって、 コツコツつくってきたサイト

記事を読む

Web

Adobe Typekitで、一瞬違うフォントが表示される時の対処法

最近、Adobe Typekitを使用し始めたのですが ページを表示させた際、 一瞬です

記事を読む

Web

.htaccessで、ディレクトリの一覧ページだけリダイレクトさせて下層ページはリダイレクトさせたくない時。

ちょっとタイトルでは分かりにくいんですが、 ・http://hogehoge.

記事を読む

ad

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

PAGE TOP ↑