こんにちは、codebydeerです。

今回は、CSSのみで「ページの最上部に戻る」のボタンを、下にスクロールしていったときに表示させるやつを実装していこうと思います。
めちゃくちゃ試行錯誤しました。
やっと見つけた...

結論

index.html

<body id="top">
    <nav class="jumpTop">
        <a href="#top">
            <svg stroke-width="0.3" viewBox="0 0 4 4" xmlns="http://www.w3.org/2000/svg">
                <path d="M2,1 v2 m0,-2 l1,1 m-1,-1 l-1,1"></path>
            </svg>
        </a>
    </nav>    
    ...
</body>

index.css

        nav.jumpTop {
            --jtWH: 45px;
            --jtBtm: 80px;
            --jtRight: 10vw;
            padding-top: 1px;
            position: sticky;
            top: calc((var(--jtBtm) + var(--jtWH)) * -1);
        }

        nav.jumpTop>a {
            display: block;
            position: absolute;
            top: 100vh;
            right: var(--jtRight);
            width: var(--jtWH);
            height: var(--jtWH);
            background-color: #ffffcc;
            border-radius: 100%;
            border: 1px solid black;
        }

css変数名	説明
--jtWH	ボタンの大きさ(横幅)
--jtBtm	ボタンの下からの距離
--jtRight	ボタンの右からの距離

解説

bodyの直下に「上に戻る」ボタンの外枠(nav要素)を置き、その中にボタン(a要素)を置きます
ボタンのa要素にposition: absolute;を指定することで、ボタンのa要素がフローから除外され、先程設置した外枠の中身にはなにも入っていない(イメージ的には、高さが０である「ボタンのa要素の基線」のみがある)状態になります
外枠のnav要素にposition: sticky;を指定し、topプロパティをビューポートの一番上よりもさらに上、見えていないところ(負の値)に設定することで、しばらくスクロールしてから固定させるようにします
ボタンのa要素のtopを、ちょうどスクロールして固定された時にいちばん上手く見えるように指定します (基本的には100vhを指定します。そうすることで、一番上ではちょうどぴったりビューポート外に出て、固定される時にはposition: sticky;の要素のtopプロパティで指定した分のオフセットだけ飛び出て来ます。)

感想・できた経緯

最初、.jumpTopのボックス自体をposition: fixed;で浮かせてから、その中をposition: sticky;で固定させようとしたのですが、
いかんせん親要素が違うために、相対位置指定がうまくいかなかったのです。
というか全体をスクロールさせようとしたときに、ボタンをスクロールさせれないから、一向にボタンが出てこなかったり固定されなかったり...って感じでした。
そして私が出した天才的な最適解はこれだ！！って感じです

どうやったら親要素を一致させつつ、position: sticky;の要素をposition: absolute;のように相対位置指定できるかを考えたとき、positionの特性上stickyの要素をabsoluteの要素よりも下に来させて実現するのは不可能だと思い、最終的にこの方法にたどり着きました。

position: stickyは、通常時はposition: staticと同じように動作するため、どうレイアウトを崩さずposition: stickyをねじ込むかが重要な課題でした。
position: stickyの指定位置をマイナスにして、absoluteの高さ(top)をビューポートにするのはさすがにキレッキレの解決策だと思います。(自画自賛)

ちなみに、paddingを追加した理由は、marginによってページの一番上の要素がビューポートよりもちょっとだけ下に来ちゃってたから、padding入れてページの一番上をそろえたって感じです。

いいねほしい！

この記事を読んでくれた方々に、とても感謝しています！
そして、皆さんのページでのスマートなコーディングの助けになれたら、幸いです。
いいねをいただけると自己肯定感上がるので、うれしいです！

最後までお読みいただきありがとうございました！では！