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