巧用 CSS sticky 實現返回頂部功能
經常在某些文檔中或者文章中可以看到這樣一個"返回頂部"的功能，具體有兩個交互：
- 只有滾動一定距離才會出現，返回到頂部重新隱藏
- 點擊會返回到頂部
比如 LuLu UI[1]
又是點擊的，又是滾動的，看著好像必須要借助 JavaScript 了，其實也可不必，經過我的一番琢磨，僅僅使用一點點 CSS 就能實現這樣的交互效果，一起看看吧！
一、粘性滾動
這里就需要一點點想象了。比如這里滾動到一定距離才出現，是不是有點類似 CSS sticky[2] 的概念？只不過 sticky 的一般作用是滾動到一定距離，然后就固定到某一位置，mdn 解釋如下
元素根據正常文檔流進行定位，然后相對它的*最近滾動祖先（nearest scrolling ancestor）*和 containing block[3] (最近塊級祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值進行偏移。偏移值不會影響任何其他元素的位置。
雖然和我們需要的交互有點出路，但是仍然可以通過一定的“技巧”聯合起來，先簡單實現一下布局：
- <a class="back"></a>
- <article>
- ...很多內容
- </article>
這里注意需要將.back 放在前面，不然沒法觸發粘性定位，然后給 .back加上 sticky 定位。
- .back{
- position: sticky;
- display: block;
- top: 0;
- border-radius: 50%;
- background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E %3Cpath fill='%23ffffff' d='M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z'%3E%3C/path%3E %3C/svg%3E") center no-repeat dodgerblue;
- background-size: 50%;
- width: 50px;
- height: 50px;
- }
由于這里的 top 給的為 0，所以返回按鈕在滾動過程中是貼在頂部的，如下：
這時，如果把 top 改為一個負值會怎么樣呢?
- .back{
- /**/
- position: sticky;
- top: -30px;
- }
可以看到，按鈕會在超出屏幕 -30px 的地方固定，如下：
接著，我們把.back向下偏移整個屏幕距離，也就是 100vh。
- .back{
- /**/
- position: sticky;
- top: -30px;
- transform: translateY(100vh);
- }
這樣，和我們需要的效果已經很接近了，只是最后只出現了一部分，如下：
原理示意如下：
最后，把剛才的top設置的更小一些，直到.back可以完全出現，比如設置 -60px。
- .back{
- /**/
- position: sticky;
- top: -60px;
- transform: translateY(100vh);
- }
這樣基本上就完成了，不過還有一些問題，接著往下看。
二、右下角的處理
上面的實現其實還有兩個布局問題需要優化：
- 按鈕本身占據了一定的空間
- 按鈕一般位于右下角
一般為了讓一個元素不占空間，可能想到的方法是設置絕對定位。但是這里由于設置了 position: sticky，所以肯定不能再設置絕對定位了。除此之外，我們還可以采用浮動float，可以很輕易的解決以上兩個布局問題
- .back{
- /***/
- float: right
- }
設置右浮動有兩個好處，一是脫離文檔流，不影響高度，二是實現居右效果，實際效果如下：
其實到了這里，還是有個小問題的，當頭部的文字比較多時，可以很清楚的看到右環繞效果，如下：
如何處理呢?很簡單，加一個負的margin就可以了。
- .back{
- /***/
- float: right；
- margin-top:-50px;/*自身高度*/
- }
但是又出現了新的問題，底下的按鈕又漏出來了。
由于 top已經被sticky占用，現在改變按鈕位置就只能靠transform了，這里可以用calc進行計算，同時top也要相應減少自身高度。
- .back{
- /***/
- float: right； z margin-top:-50px;/*自身高度*/
- top: -110px; /*60 + 50*/
- transform: translateY(calc(100vh + 50px));
- }
完美！
三、返回頂部
返回頂部就比較容易了，一般可以通過href='#'就可以實現，當然，為了平滑的滾動，可以加上scroll-behavior: smooth。
- html, body {
- scroll-behavior:smooth;
- }
實際效果如下：
最后附上完整代碼，非常少。
- html,body{
- scroll-behavior: smooth;
- }
- .back{
- position: sticky;
- float: right;
- top: -110px;
- margin-top: -50px;
- border-radius: 50%;
- background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E %3Cpath fill='%23ffffff' d='M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z'%3E%3C/path%3E %3C/svg%3E") center no-repeat dodgerblue;
- background-size: 50%;
- width: 50px;
- height: 50px;
- transform: translateY(calc(100vh + 50px));
- }
HTML 只需要在起始地方加一個標簽即可。
- <body>
- <a class="back" href="#"></a><!--添加再這里就行了-->
- <article>
- ...很多內容
- </article>
- </body>
線上代碼可訪問 back-top \(codepen.io\)[4]
四、總結和說明
以上借助 CSS sticky 實現了一個自動顯示返回按鈕的小交互，本身代碼量并不復雜，其實是一點點想象力，把比較相似的效果聯想起來，多多嘗試，可能會帶來不一樣的解決方案。下面總結一下實現要點：
- CSS sticky 可以實現粘性滾動效果，可以設置負值
- transformY(100vh)可以偏移1屏幕高度，不影響占位
- 浮動可以脫離文檔流，不影響高度
- 負的 margin 可以抵消浮動的環繞效果
- scroll-behavior: smooth 可以實現平滑滾動
- 兼容性取決于 sticky，不兼容IE
還算是一個比較實用的小功能，雖然 JS 也能實現，但是能用 CSS 實現的何必麻煩 JS 呢？相比 JS 而言，CSS 使用起來簡單方便，也無需考慮加載問題，幾乎零成本。
