こんにちは、codebydeerです。
今回は、CSSのみで「ページの最上部に戻る」のボタンを、下にスクロールしていったときに表示させるやつを実装していこうと思います。
めちゃくちゃ試行錯誤しました。
やっと見つけた...
結論
<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>
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入れてページの一番上をそろえたって感じです。
いいねほしい！
この記事を読んでくれた方々に、とても感謝しています！
そして、皆さんのページでのスマートなコーディングの助けになれたら、幸いです。
いいねをいただけると自己肯定感上がるので、うれしいです！
最後までお読みいただきありがとうございました！では！