Qiitaに技術面を移行しようかと思ってます。もち初心者用です、わたし初心者なんで。

【スクロールアップ・ダウン・ボタンの作り方】

こちらからどうぞ。https://qiita.com/beerneko/items/c0fcf0a8c9b74d9b7db6　（書いてることはおなじです。）

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

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 

＜a id="back-to-down" href="#" class="btn btn-dark btn-sm back-to-down" role="button">Down 

＜/div>

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

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