部落格園裝飾——（二）滾動到頁面頂部或底部
一、功能描述
1.1 文字描述
-
當頁面向下滾動一定距離時，向下滾動到底部的按鈕以淡入的效果出現，並以固定定位顯示。且滾動到一定距離(快接近所設定的底部)時，該按鈕又會以淡出效果消失。
-
當頁面向下滾動一定距離時，向上滾動到頂部的按鈕以淡入的效果出現，並以固定定位顯示。往上滾回原來出現的位置前，該按鈕又會以淡出效果消失。
1.2 圖片效果展示
二、程式碼展示
2.1 html 部分
<body>
<div class="totop" style="z-index: 100;"><span>↑</span></div>
<div class="tobuttom" style="z-index: 100;"><span>↓</span></div>
<!--
<p>文件內容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
上面這一段重複20遍，是為了讓頁面長度足夠長而已
為了減少冗餘，保證本文篇幅不會過大，採用以下縮寫表示
-->
(p{文件內容}+br*10)*20
</body>
兩個分別是向上滾動和向下滾動的按鈕標籤，以及為了增大頁面長度使用的眾多p和br標籤
2.2 CSS 部分
<style type="text/css">
.totop, .tobuttom{
width:75px;
height:75px;
border-radius: 50%;
background-color: pink;
opacity: 0.7;
position:fixed;
top:700px;
right:75px;
cursor: pointer;
display:none;
text-align: center;
}
.totop{
top:200px;
}
.totop span, .tobuttom span{
display: inline-block;
color:white;
font:bold 50px/75px '華文彩雲';
transform: scale(2,1);
}
</style>
對兩個標籤進行樣式設定，以及定位，並保證一開始為不展示(即display:none;)，還有按鈕內部文字內容的樣式設定
2.3 JS 部分
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// 獲取兩個滾動按鈕元素
var toTop = $('.totop');
var toButtom = $('.tobuttom');
// 獲取頁面總高度，是為了能夠儘可能的適應更多情況的頁面，且更靈活
var height = $(document).height();
// console.log(height);
toTop.click(function(){
// scrollTop 的值，可以根據自己的需要調節，使頁面向上滾動到自己預期的位置
$('html,body').stop().animate({'scrollTop':229},1500);
})
toButtom.click(function(){
// height - x ，'x' 可以根據自己的需要調節，使頁面向下滾動到自己預期的位置
$('html,body').stop().animate({'scrollTop':height-1000},1500);
})
// 滾動事件
$(window).scroll(function(){
// 獲取頁面向上滾動的距離
var iNum = $(document).scrollTop();
// document.title = iNum;
// 根據自己的需要設定按鈕的出現範圍
if((iNum>=400)&&(iNum<=(height-2000))){
toButtom.fadeIn();
}
else{
toButtom.fadeOut();
}
if(iNum>=900){
toTop.fadeIn();
}
else{
toTop.fadeOut();
}
})
})
</script>
① 獲取兩個元素：向上、向下滾動按鈕
② 獲取頁面高度
③ 設定點選事件以及滾動事件(詳情與解釋看程式碼的註釋)
三、小白教程(部落格園裝飾步驟)
前言
介於可能會有沒學過前端的小白朋友看到此篇文章，所以博主在此獻上小白教程。
前提：先確保自己把各類許可權給申請通過，再看本教程
CSS 和 JS 檔案下載地址：
連結：https://pan.baidu.com/s/1ockPW-6RpyonNWp9D0dSIA
提取碼：wz8q
3.1 將html部分程式碼複製到頁首HTML
<div class="totop"><span>↑</span></div>
<div class="tobuttom"><span>↓</span></div>
3.2 CSS部分
3.2.1 第一種方式：引入CSS檔案(頁首HTML內)
- 先上傳css檔案到自己的部落格園(順便把js也上傳吧)
- 點選兩個檔案，分別複製他們的位址列
js檔案的引入也是一樣，如上圖這樣複製位址列
- 在頁首HTML內引入剛剛上傳的CSS檔案，" href "內就是檔案地址
<link rel="stylesheet" type="text/css" href="你的部落格園上傳的CSS檔案的地址">
剛剛複製的地址，貼上進href內
3.2.2 第二種方式：直接複製CSS程式碼（不推薦）
為什麼說不推薦呢？
首先這種方式，肯定簡單快捷，但如果CSS程式碼都往這裡塞的話，就會越來越長，不方便查閱修改與管理。特別是js部分的引入問題，建議大家可以看一看下面的經驗分享。
3.3 JS部分
3.3.1 第一種方式：引入JS檔案
- 與上面引入CSS檔案前的工作一樣，把js檔案地址複製
- 將js檔案地址貼上到" src "內
<script type="text/javascript" src="你的部落格園上傳的js檔案地址"></script>
3.3.2 ※ 第二種方式：直接複製JS程式碼（不推薦）
同樣不推薦這種方式，而且博主嚴重不推薦該種方式，這種方式有個巨大的坑。
原因：首先基本原因與上面CSS相似。但最大的問題還是當你放入的js程式碼太長的話，會導致js程式碼執行失敗，這可能與部落格園服務端那邊有程式碼長度方面的限制有關，具體原因尚不清楚，反正博主我是踩過這個坑的了，在這裡將經驗分享給各位。而引入js檔案的方式就不會失效，也方便程式碼的管理與查閱，這不兩全其美嗎？更何況這是一個好習慣
3.4 最後儲存設定
四、總結與後言
該外掛可應用於部落格園裝飾，總體設計並不難，本人學習js以及jquery過程中，結合所學知識以及個人思考自行設計的，也算是給自己的一個小考驗。朋友們可以拿去食用，或者參考學習一下，自己再進行設計與優化。
博主還有其他幾篇關於部落格園裝飾的文章，可供觀看喲~
部落格園裝飾——（三）部落格園導航目錄（待更新）