TOPページへふわっと戻るボタンを作りたい方、必見！
簡単なjQueryを使ったスムーススクロールで出来る、素敵な「TOPへもどるボタン」をホームページに加えましょう。

「スムーススクロール」という言葉を聞いたことがある方もいるでしょう。このスムーススクロールとは、これから紹介する「Topに戻る」ボタンなどでよく使われる、ページ内アンカーにスクロールで移動する演出のことです。

Web閲覧者が迷うことなく目的ページにたどり着くことができ、ストレスフリーなブラウジングが行えるので、設置することをお勧めします！

↓以下がコードサンプルになります。

▼HTML

<div id="goto_top" style="display: none;">
    <a href="#">PageTop</a>
</div>

▼CSS

#goto_top {
    position: fixed;
    right: 10%;
    bottom: 10%;
}

#goto_top a {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    background: #f86560;
    display: block;
    color: #fff;
    text-align: center;
    line-height: 100px;
    text-decoration: none;
    font-weight: bold;
}       

▼jQuery

$(document).ready(function () {
    $("#goto_top").hide();
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#goto_top').fadeIn();
            } else {
                $('#goto_top').fadeOut();
            }
        });

        $('#goto_top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
});

body内のページ内アンカー（今回は ”id=goto_top” とした）がスクロールボタンになります。

最初は非表示にしておき、その後スクロールアクションで表示される仕様です。
animateタグでスピードを変えることもできますので、トップ画面に上がる速さを
色々変えてみてください。
CSSをいじれば、スクロールボタンの位置やデザインなども簡単に変更できます。

オリジナルの「ふわっとTOPへ戻るボタン」を作ってみてくださいね！！

今回、参考にさせていただいたのは、
スクロールでtopへ戻るボタンを表示するjQueryコード（スムーススクロール） ｜ memocarilogさんのページです。
ありがとうございます。

デモページは、こちら