【コピペで超簡単♪】スクロールしたら現れるTOPに戻るボタン

コピペで簡単実装【TOPに戻るボタン】の紹介。

何も考えない。コピペで簡単実装しましょう（笑）

jQueryの呼び出し

まずはjQueryをhtmlファイルに呼び出します。

htmlファイルにコピペ

<!--bodyタグ内最後の方-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

各ファイルにコピペでTOPに戻るボタンの実装

htmlファイルにコピペ

<p class="page-top"><a href="#wrap">TOPに戻る</a></p>

cssファイルにコピペ

.page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
.page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
.page-top a:hover {
    text-decoration: none;
    background: #999;
}

jsファイルにコピペ

$(function() {
    var topBtn = $('.page-top');    
    topBtn.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

これだけでスクロールを少しだけしたら画面の右下に【TOPに戻るボタン】が現れます。

細かいデザイン調整はhtmlファイルとcssで、お好みで！