部落格園裝飾——(二)滾動到頁面頂部或底部
阿新 • • 發佈:2020-07-19
# 部落格園裝飾——(二)滾動到頁面頂部或底部
## 一、功能描述
### 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過程中,結合所學知識以及個人思考自行設計的,也算是給自己的一個小考驗。朋友們可以拿去食用,或者參考學習一下,自己再進行設計與優化。
>博主還有其他幾篇關於部落格園裝飾的文章,可供觀看喲~
>
>部落格園裝飾——(一)置頂選單欄(導航欄)
>
>部落格園裝飾——(三)部落格園導航目錄(待