Scroll to Top 回到最上面 • UI & Dev • Figma 教學
1.5K views · 2024-11-02
UI DesignInteraction & UX
這集我們來看要如何製作 "scroll to top", 回到網頁最上面的UI設計。我們會先以前端的角度去思考製作這樣物件的方式,標示上所需要知道的物件位置或間距訊息。
Figma設計檔: https://drive.google.com/file/d/16TJQwsdXJPdWtLc8bzk-ZcKbOifPkSTZ/view?usp=drive_link
0:00 設計預覽
0:17 CSS 前端概述
1:27 設計檔案講解
3:59 Scroll to Top 製作
11:57 Desktop 版本
16:34 總結
#ScrollToTop #StickyScroll #回到最上面 #滑到頂端 #到最上面按鈕 #IgnoreAutolayout #PositionAbsolute
Figma設計檔: https://drive.google.com/file/d/16TJQwsdXJPdWtLc8bzk-ZcKbOifPkSTZ/view?usp=drive_link
0:00 設計預覽
0:17 CSS 前端概述
1:27 設計檔案講解
3:59 Scroll to Top 製作
11:57 Desktop 版本
16:34 總結
#ScrollToTop #StickyScroll #回到最上面 #滑到頂端 #到最上面按鈕 #IgnoreAutolayout #PositionAbsolute