網(wǎng)站頁面內(nèi)容過多，需要下拉滑動，但又想快速回到頂部，右下角會出現(xiàn)回到頂部的按鈕或圖標(biāo)，點擊該圖標(biāo)，瀏覽器會快速切換到頁面頂部，這個交互效果該如何實現(xiàn)呢？

常見的回到頂部場景，網(wǎng)站頁面內(nèi)容過多，需要下拉滑動，但又想快速回到頂部，右下角會出現(xiàn)回到頂部的按鈕或圖標(biāo)，點擊該圖標(biāo)，瀏覽器會快速切換到頁面頂部，如何實現(xiàn)呢？

如下圖，瀏覽器上滑動超過頂部導(dǎo)航高度時，有兩個交互效果：

1. 自動出現(xiàn)“回到頂部”按鈕；
2. 點擊“回到頂部”，返回到網(wǎng)頁首部區(qū)域；

第一步，建立母版

母版名稱命名為“回到頂部”，在母版中設(shè)置兩個按鈕和一個熱區(qū)，分別命名為“咨詢”或者其他隨意，另一個叫”回到頂部“；熱區(qū)命名為“頂部”。

設(shè)置“回到頂部”元件為隱藏狀態(tài)，并且設(shè)置點擊事件，點擊“回到頂部”滾動至頂部熱區(qū)（下圖）：

將“課程咨詢”和“回到頂部”二個元件設(shè)置為動態(tài)面板，命名為“側(cè)欄導(dǎo)航”，設(shè)置該動態(tài)面板屬性為固定至瀏覽器某個位置，常見的為右下角，案例中，我設(shè)置距離瀏覽器右側(cè)10像素，瀏覽器下邊緣10像素。

第二步，設(shè)置頁面滾動條件

在頁面窗口滾動時，設(shè)置當(dāng)滾動值大于150PX時，顯示“頂部導(dǎo)航”滾動值小于150px時，隱藏“頂部導(dǎo)航”。

第三步，拖動至指定頁面

需要回到頂部的地方，如下圖，案例中我需要回到頂部導(dǎo)航，所以拖放至頂部主導(dǎo)航右側(cè)。

基本完成，刷新一下，看看效果。

當(dāng)小于150像素時，不顯示“頂部導(dǎo)航”。

文章第一張圖為大于150像素時，顯示，且固定在屏幕右下角，制作成功！??！

本文由 @胖子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議