偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

巧用 CSS sticky 實(shí)現(xiàn)返回頂部功能

開發(fā) 前端
又是點(diǎn)擊的,又是滾動(dòng)的,看著好像必須要借助 JavaScript 了,其實(shí)也可不必,經(jīng)過我的一番琢磨,僅僅使用一點(diǎn)點(diǎn) CSS 就能實(shí)現(xiàn)這樣的交互效果,一起看看吧

[[433133]]

經(jīng)常在某些文檔中或者文章中可以看到這樣一個(gè)"返回頂部"的功能,具體有兩個(gè)交互:

  1.   只有滾動(dòng)一定距離才會(huì)出現(xiàn),返回到頂部重新隱藏
  2.   點(diǎn)擊會(huì)返回到頂部

比如 LuLu UI[1]

又是點(diǎn)擊的,又是滾動(dòng)的,看著好像必須要借助 JavaScript 了,其實(shí)也可不必,經(jīng)過我的一番琢磨,僅僅使用一點(diǎn)點(diǎn) CSS 就能實(shí)現(xiàn)這樣的交互效果,一起看看吧!

一、粘性滾動(dòng)

這里就需要一點(diǎn)點(diǎn)想象了。比如這里滾動(dòng)到一定距離才出現(xiàn),是不是有點(diǎn)類似 CSS sticky[2] 的概念?只不過 sticky 的一般作用是滾動(dòng)到一定距離,然后就固定到某一位置,mdn 解釋如下

元素根據(jù)正常文檔流進(jìn)行定位,然后相對(duì)它的*最近滾動(dòng)祖先(nearest scrolling ancestor)*和 containing block[3] (最近塊級(jí)祖先 nearest block-level ancestor),包括table-related元素,基于top, right, bottom, 和 left的值進(jìn)行偏移。偏移值不會(huì)影響任何其他元素的位置。

雖然和我們需要的交互有點(diǎn)出路,但是仍然可以通過一定的“技巧”聯(lián)合起來(lái),先簡(jiǎn)單實(shí)現(xiàn)一下布局:

  1. <a class="back"></a>  
  2. <article>  
  3. ...很多內(nèi)容  
  4. </article> 

這里注意需要將.back 放在前面,不然沒法觸發(fā)粘性定位,然后給 .back加上 sticky 定位。

  1. .back{  
  2.   position: sticky;  
  3.   display: block;  
  4.   top: 0;  
  5.   border-radius: 50%;  
  6.   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; 
  7.   background-size: 50%;  
  8.   width: 50px;  
  9.   height: 50px;  

由于這里的 top 給的為 0,所以返回按鈕在滾動(dòng)過程中是貼在頂部的,如下:

這時(shí),如果把 top 改為一個(gè)負(fù)值會(huì)怎么樣呢? 

  1. .back{  
  2.   /**/  
  3.   position: sticky;  
  4.   top: -30px;  

可以看到,按鈕會(huì)在超出屏幕 -30px 的地方固定,如下:

接著,我們把.back向下偏移整個(gè)屏幕距離,也就是 100vh。

  1. .back{  
  2.   /**/  
  3.   position: sticky;  
  4.   top: -30px;  
  5.   transform: translateY(100vh);  

這樣,和我們需要的效果已經(jīng)很接近了,只是最后只出現(xiàn)了一部分,如下:

原理示意如下:

最后,把剛才的top設(shè)置的更小一些,直到.back可以完全出現(xiàn),比如設(shè)置 -60px。

  1. .back{  
  2.   /**/  
  3.   position: sticky;  
  4.   top: -60px;  
  5.   transform: translateY(100vh);  

這樣基本上就完成了,不過還有一些問題,接著往下看。

二、右下角的處理

上面的實(shí)現(xiàn)其實(shí)還有兩個(gè)布局問題需要優(yōu)化:

  1.  按鈕本身占據(jù)了一定的空間
  2.  按鈕一般位于右下角

一般為了讓一個(gè)元素不占空間,可能想到的方法是設(shè)置絕對(duì)定位。但是這里由于設(shè)置了 position: sticky,所以肯定不能再設(shè)置絕對(duì)定位了。除此之外,我們還可以采用浮動(dòng)float,可以很輕易的解決以上兩個(gè)布局問題 

  1. .back{  
  2.   /***/  
  3.   float: right  

設(shè)置右浮動(dòng)有兩個(gè)好處,一是脫離文檔流,不影響高度,二是實(shí)現(xiàn)居右效果,實(shí)際效果如下:

其實(shí)到了這里,還是有個(gè)小問題的,當(dāng)頭部的文字比較多時(shí),可以很清楚的看到右環(huán)繞效果,如下:

如何處理呢?很簡(jiǎn)單,加一個(gè)負(fù)的margin就可以了。

  1. .back{  
  2.   /***/  
  3.   float: right;  
  4.   margin-top:-50px;/*自身高度*/  

但是又出現(xiàn)了新的問題,底下的按鈕又漏出來(lái)了。

由于 top已經(jīng)被sticky占用,現(xiàn)在改變按鈕位置就只能靠transform了,這里可以用calc進(jìn)行計(jì)算,同時(shí)top也要相應(yīng)減少自身高度。 

  1. .back{  
  2.   /***/  
  3.   float: right;  z  margin-top:-50px;/*自身高度*/  
  4.   top: -110px; /*60 + 50*/  
  5.   transform: translateY(calc(100vh + 50px));  

完美!

三、返回頂部

返回頂部就比較容易了,一般可以通過href='#'就可以實(shí)現(xiàn),當(dāng)然,為了平滑的滾動(dòng),可以加上scroll-behavior: smooth。 

  1. html, body {   
  2.   scroll-behavior:smooth;   

實(shí)際效果如下:

最后附上完整代碼,非常少。 

  1. html,body{  
  2.   scroll-behavior: smooth;  
  3.  
  4. .back{  
  5.   position: sticky;  
  6.   float: right;  
  7.   top: -110px;  
  8.   margin-top: -50px;  
  9.   border-radius: 50%;  
  10.   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; 
  11.   background-size: 50%;  
  12.   width: 50px;  
  13.   height: 50px;  
  14.   transform: translateY(calc(100vh + 50px));  

HTML 只需要在起始地方加一個(gè)標(biāo)簽即可。 

  1. <body>  
  2.   <a class="back" href="#"></a><!--添加再這里就行了-->  
  3.   <article>  
  4.   ...很多內(nèi)容  
  5.   </article>  
  6. </body> 

線上代碼可訪問 back-top \(codepen.io\)[4]

四、總結(jié)和說明

以上借助 CSS sticky 實(shí)現(xiàn)了一個(gè)自動(dòng)顯示返回按鈕的小交互,本身代碼量并不復(fù)雜,其實(shí)是一點(diǎn)點(diǎn)想象力,把比較相似的效果聯(lián)想起來(lái),多多嘗試,可能會(huì)帶來(lái)不一樣的解決方案。下面總結(jié)一下實(shí)現(xiàn)要點(diǎn):

  1.   CSS sticky 可以實(shí)現(xiàn)粘性滾動(dòng)效果,可以設(shè)置負(fù)值
  2.   transformY(100vh)可以偏移1屏幕高度,不影響占位
  3.   浮動(dòng)可以脫離文檔流,不影響高度
  4.   負(fù)的 margin 可以抵消浮動(dòng)的環(huán)繞效果
  5.   scroll-behavior: smooth 可以實(shí)現(xiàn)平滑滾動(dòng)
  6.   兼容性取決于 sticky,不兼容IE

還算是一個(gè)比較實(shí)用的小功能,雖然 JS 也能實(shí)現(xiàn),但是能用 CSS 實(shí)現(xiàn)的何必麻煩 JS 呢?相比 JS 而言,CSS 使用起來(lái)簡(jiǎn)單方便,也無(wú)需考慮加載問題,幾乎零成本。 

 

責(zé)任編輯:龐桂玉 來(lái)源: 前端大全
相關(guān)推薦

2023-06-27 09:33:15

Loading 動(dòng)畫CSS

2022-01-13 07:04:54

CSS 技巧Loading 動(dòng)畫

2023-10-14 15:29:28

RedisFeed

2022-01-28 09:01:49

架構(gòu)

2022-02-16 08:21:28

CSS三角邊框動(dòng)畫SVG

2022-04-12 07:37:08

CSS滾動(dòng)視差效果前端

2020-12-24 08:37:41

Css前端加載動(dòng)畫

2021-08-30 06:20:39

CSS 技巧3D 效果

2023-04-06 00:19:26

CSSSticky前端

2009-11-10 13:27:30

VB.NET RND(

2025-04-16 05:00:00

2010-01-25 12:58:26

2025-02-18 10:13:20

2021-08-05 23:09:53

前端程序員CSS

2010-09-03 10:58:45

DIVCSS

2022-02-28 07:02:51

CSS二維碼前端

2010-01-22 09:01:02

2021-02-01 00:04:13

Dictionary數(shù)據(jù)批量

2024-10-22 08:47:03

2024-09-09 15:24:26

Redis開發(fā)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)