部落格園裝飾——（二）滾動到頁面頂部或底部

油炸地獄發表於2020-07-19

部落格園裝飾——（二）滾動到頁面頂部或底部

一、功能描述

1.1 文字描述

  1. 當頁面向下滾動一定距離時，向下滾動到底部的按鈕以淡入的效果出現，並以固定定位顯示。且滾動到一定距離(快接近所設定的底部)時，該按鈕又會以淡出效果消失。

  2. 當頁面向下滾動一定距離時，向上滾動到頂部的按鈕以淡入的效果出現，並以固定定位顯示。往上滾回原來出現的位置前，該按鈕又會以淡出效果消失。

1.2 圖片效果展示

滾動效果展示.gif

二、程式碼展示

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

頁首html.png 
<div class="totop"><span>↑</span></div>
<div class="tobuttom"><span>↓</span></div>

3.2 CSS部分

3.2.1 第一種方式：引入CSS檔案(頁首HTML內)

  1. 先上傳css檔案到自己的部落格園(順便把js也上傳吧)
檔案上傳.png
  1. 點選兩個檔案，分別複製他們的位址列
複製位址列.png

js檔案的引入也是一樣，如上圖這樣複製位址列

  1. 在頁首HTML內引入剛剛上傳的CSS檔案，" href "內就是檔案地址
CSS檔案引入.png 
<link rel="stylesheet" type="text/css" href="你的部落格園上傳的CSS檔案的地址">

剛剛複製的地址，貼上進href內

3.2.2 第二種方式：直接複製CSS程式碼（不推薦）

CSS檔案引入2.png

為什麼說不推薦呢？

首先這種方式，肯定簡單快捷，但如果CSS程式碼都往這裡塞的話，就會越來越長，不方便查閱修改與管理。特別是js部分的引入問題，建議大家可以看一看下面的經驗分享。

3.3 JS部分

3.3.1 第一種方式：引入JS檔案

  1. 與上面引入CSS檔案前的工作一樣，把js檔案地址複製
  2. 將js檔案地址貼上到" src "內
js檔案引入.png 
<script type="text/javascript" src="你的部落格園上傳的js檔案地址"></script>

3.3.2 ※ 第二種方式：直接複製JS程式碼（不推薦）

部落格園裝飾——（二）滾動到頁面頂部或底部

同樣不推薦這種方式，而且博主嚴重不推薦該種方式，這種方式有個巨大的坑。

原因：首先基本原因與上面CSS相似。但最大的問題還是當你放入的js程式碼太長的話，會導致js程式碼執行失敗，這可能與部落格園服務端那邊有程式碼長度方面的限制有關，具體原因尚不清楚，反正博主我是踩過這個坑的了，在這裡將經驗分享給各位。而引入js檔案的方式就不會失效，也方便程式碼的管理與查閱，這不兩全其美嗎？更何況這是一個好習慣

3.4 最後儲存設定

四、總結與後言

該外掛可應用於部落格園裝飾，總體設計並不難，本人學習js以及jquery過程中，結合所學知識以及個人思考自行設計的，也算是給自己的一個小考驗。朋友們可以拿去食用，或者參考學習一下，自己再進行設計與優化。

博主還有其他幾篇關於部落格園裝飾的文章，可供觀看喲~

部落格園裝飾——（一）置頂選單欄（導航欄）

部落格園裝飾——（三）部落格園導航目錄（待更新）

相關文章