# 部落格園裝飾——（二）滾動到頁面頂部或底部 ## 一、功能描述 ### 1.1 文字描述 1. 當頁面向下滾動一定距離時，**向下滾動到底部**的按鈕以**淡入**的效果出現，並以**固定定位**顯示。且滾動到一定距離**(快接近所設定的底部)**時，該按鈕又會以**淡出**效果消失。 2. 當頁面向下滾動一定距離時，**向上滾動到頂部**的按鈕以**淡入**的效果出現，並以**固定定位**顯示。往上滾回原來出現的**位置前**，該按鈕又會以**淡出**效果消失。 ### 1.2 圖片效果展示 ## 二、程式碼展示 ### 2.1 html 部分 ```html ↑ ↓ (p{文件內容}+br*10)*20 ``` > ​ 兩個分別是向上滾動和向下滾動的按鈕標籤，以及為了增大頁面長度使用的眾多p和br標籤 ### 2.2 CSS 部分 ```CSS ``` >對兩個標籤進行樣式設定，以及定位，並保證一開始為不展示(即display:none;)，還有按鈕內部文字內容的樣式設定 ### 2.3 JS 部分 ```javascript ``` >① 獲取兩個元素：向上、向下滾動按鈕 > >② 獲取頁面高度 > >③ 設定點選事件以及滾動事件(詳情與解釋看程式碼的註釋) ## 三、小白教程(部落格園裝飾步驟) ### 前言 > 介於可能會有沒學過前端的小白朋友看到此篇文章，所以博主在此獻上小白教程。 > > 前提：先確保自己把各類許可權給申請通過，再看本教程 > > CSS 和 JS 檔案下載地址： > > 連結：https://pan.baidu.com/s/1ockPW-6RpyonNWp9D0dSIA > 提取碼：wz8q ### 3.1 將html部分程式碼複製到頁首HTML ```html ↑ ↓ ``` ### 3.2 CSS部分 #### 3.2.1 第一種方式：引入CSS檔案(頁首HTML內) 1. 先上傳css檔案到自己的部落格園**(順便把js也上傳吧)** 2. 點選兩個檔案，分別複製他們的位址列 >js檔案的引入也是一樣，如上圖這樣複製位址列 3. 在**頁首HTML**內引入剛剛上傳的CSS檔案，**" href "**內就是**檔案地址** ```html ``` >剛剛複製的地址，貼上進**href**內 #### 3.2.2 第二種方式：直接複製CSS程式碼（不推薦） >為什麼說不推薦呢？ > >首先這種方式，肯定簡單快捷，但如果CSS程式碼都往這裡塞的話，就會越來越長，**不方便查閱修改與管理**。特別是**js部分的引入問題**，建議大家可以看一看下面的經驗分享。 ### 3.3 JS部分 #### 3.3.1 第一種方式：引入JS檔案 1. 與上面引入CSS檔案前的工作一樣，把**js檔案地址複製** 2. 將**js檔案地址**貼上到**" src "**內 ```html ``` #### 3.3.2 ※ 第二種方式：直接複製JS程式碼（不推薦） >同樣不推薦這種方式，而且博主**嚴重不推薦該種方式**，這種方式有個巨大的坑。 > >原因：首先基本原因與上面CSS相似。但最大的問題還是==**當你放入的js程式碼太長的話，會導致js程式碼執行失敗**==，這可能與部落格園服務端那邊有程式碼長度方面的限制有關，具體原因尚不清楚，反正博主我是踩過這個坑的了，在這裡將經驗分享給各位。**而==引入js檔案的方式就不會失效==，也方便程式碼的管理與查閱，這不兩全其美嗎？更何況這是一個好習慣** ### 3.4 最後儲存設定 ## 四、總結與後言 該外掛可應用於部落格園裝飾，總體設計並不難，本人學習js以及jquery過程中，結合所學知識以及個人思考自行設計的，也算是給自己的一個小考驗。朋友們可以拿去食用，或者參考學習一下，自己再進行設計與優化。 >博主還有其他幾篇關於部落格園裝飾的文章，可供觀看喲~ > >部落格園裝飾——（一）置頂選單欄（導航欄） > >部落格園裝飾——（三）部落格園導航目錄（待