用 WPFront Scroll Top 外掛來返回文章目錄！ – 創作者學苑

先前我們已經學會使用 Easy Table of Contents 建立文章目錄
卻因為文章太長回去目錄很困擾~
如果想要一鍵返回頂部目錄?  歡迎使用 WPFront Scroll Top !

(1) 如果外未啟用，請至後台>>外掛，將 「WPFront Scroll Top」啟用

(2) 啟用後，選擇 「Seeeings」

(3) 來到設定頁面，將 「Enabled」打勾

(4) 選擇按鈕方式

Button Style 有三種選擇：Image 、Text、Font Awesome

• Image 可以選擇預設的圖片或自己上傳圖片
• Text 是可以輸入文字使用
• Font Awesome 是使用Font Awesome網站上的圖標

按鈕設定會在後面的步驟詳細解說~~

 

(5) 選擇 「Scroll to Element」

一般回到頂部是用 Scroll to Top，因為這次我們是要回到目錄位置，所以要使用Scroll to Element
Element CSS Selector 因為要抓 Easy Table of Contents 的目錄位置，我們要輸入「.outline」

(6) 選擇 「Exclude in following pages」,將 home打勾

如果首頁想要出現按紐則可以跳過這一步，直接選擇 All pages
如果需要指定文章，填寫文章ID在輸入框，並用英文逗號「,」做間隔

(7) 選擇圖片，並按現「儲存變更」

儲存完畢，就可以在網站上看到剛剛設定的返回頂部按鈕囉!

 

 

---

其他按鈕設定方式

如果在步驟(4) 選擇「Font Awesome」會在步驟(7) 看到這個畫面

Font Awesome 網站 除了付費圖標，也可以找尋免費的圖標使用~

進網站後選「Start Using Fre」

複製貼在剛剛「Font Awesome URL」的設定

接著搜尋需要的圖標，例如:arrow

「Free」打勾，選需要的圖標

選「Start Using This Icon」

複製class內的名稱，貼到「Icon Class」的設定

一樣儲存，就可以在網站上看到返回頂部按鈕囉!

圖標太小可以在「Custom CSS」，修改CSS 進行放大，例如:

#wpfront-scroll-top-container i:hover{font-size: 40px;}
#wpfront-scroll-top-container i {font-size: 40px;}