初心者おばちゃんの簡単jQueryスクロールボタン

初心者おばちゃんの簡単jQueryスクロールボタン

いろいろと探してみて、一番スムーズにスクロールしてくれるスクロール・トゥ・トップ、そしてダウンのやり方をご紹介します。そのままコピペして使ってもしっかり動きます。

CSSの設定

    .back-to-top {
        position: fixed;
        left: 0;
        bottom: 85px;
        display: none;
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .back-to-down {
        position: fixed;
        right: 0;
        bottom: 85px;
        display: none;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

「rotate(90deg)」で飛行機のアイコンが上向きに飛ぶようにしてます。

javascript（jQuery）

    $(document).ready(function(){
        $(window).scroll(function () {
                if ($(this).scrollTop() > 500) {
                    $('#back-to-top').fadeIn();
                } else {
                    $('#back-to-top').fadeOut();
                }
            });
            $('#back-to-top').click(function () {
                $('body,html').animate({
                    scrollTop: 0
                }, 400);
                return false;
            });
    });
    $(document).ready(function(){
        $(window).scroll(function () {
            if (($(this).scrollTop()+800) > $('#down').height()) {
                $('#back-to-down').fadeOut();
            } else {
                $('#back-to-down').fadeIn();
            }
            });
            $('#back-to-down').click(function () {
                $('body,html').animate({
                    scrollTop: $('#down').height()
                }, 400);
                return false;
            });
    });

HTML

<div class="container" id="down">
    <div class="container">
        <main role="main">
        </main>
    </div>
    <a id="back-to-top" href="#" class="btn btn-dark btn-sm back-to-top" role="button">Top&#8195<i class="fa fa-fighter-jet"></i></a>
    <a id="back-to-down" href="#" class="btn btn-dark btn-sm back-to-down" role="button">Down&#8195<i class="fa fa-fighter-jet"></i></a>
</div>

ここでは、最初の「class="container"」ですべて真ん中に持ってきて、次の「class="container"」でメインを真ん中にもってくる。そうするとメインの外側でボタンがついてくれるので、デバイスを選ばず表示してくれると思ってこうしてます。
まだまだCSSわかんないことばかりで大変。
初心者には初心者なりの疑問があります。「こんなこともわからないのか！」となる部分が往々にしてつまずく場所になったります。

実際にどう動くのかはこちらのサイトから「test」のアカウントで入って確認してみてください。
https://oboero3.azurewebsites.net/