初心者おばちゃんの簡単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/