Backtop 回到頂部

長頁面捲動一段距離後出現的浮動按鈕,一鍵回到頂部。使用 Element Plus 的 el-backtop。

設計準則

• 只在真的很長的頁面用:長列表、長報表、長設定頁;短頁面不需要,反而干擾
• 固定右下角:right / bottom 全產品用同一組數值(建議 40px),位置一致才不會誤觸其他浮動元件
• visibility-height 設一個門檻(例如一個畫面高度),捲一小段就冒出來會很煩
• 預設圓形圖示即可;要客製也維持圓形、用品牌主色,別做成一大塊
• 頁面內若有獨立捲動區,用 target 指向該容器;整頁捲動則不用設(預設對 window)

基本用法

loading

自訂內容

用預設插槽換成自訂樣式,維持圓形與品牌主色。

loading

Do / Don't

✅ Do	❌ Don't
只在超長頁面出現	短頁也放一顆
全產品固定右下同一位置	每頁位置飄來飄去
門檻設一個畫面高	捲一點點就冒出來
維持圓形 + 品牌色	做成一大塊搶眼按鈕

給工程師

• target 指向捲動容器的 CSS 選擇器(不設則對整頁 window);visibility-height 是出現門檻(預設 200)
• right / bottom 控制距離右／下邊的距離(預設皆 40);@click 可掛額外行為
• 預設插槽可自訂按鈕內容
• 完整 API 見 Element Plus Backtop 文件。本站規範優先於 EP 文件中的視覺建議。