網頁Top按鈕 (網頁回到頂端)，純 CSS+jQuery 免圖片

在手持行動裝置逐漸取代 PC 的現在
響應式網頁 (RWD / Responsive Web Design) 的規劃也非常普遍

使用 PC/NB 瀏覽網頁時，即使沒有 Go Top 按鈕也可以使用鍵盤的 Ctrl+Home 來達成目的
但使用手持行動裝置就不是那麼一回事了，如果沒有這按鈕時就只能一直不停的往上滑動

最近使用 Bootstrap 4 + jQuery 弄 RWD 頁面，就需要在網頁上加上回到網頁最上方的按鈕
然而 Bootstrap 4 已經捨棄了 Glyphicons icon font，想達到目的的選擇大概就是

使用圖片
使用 SVG 繪製
使用 Glyphicons、Octicons、Font Awesome 或其他第三方專案

但是不想使用圖片，對 SVG 也不熟，也不想使用第三方專案的解決方案

第三方專案在使用上真的很簡單方便又好看，只要一行加入一個 Tag 就可以使用
如果網站上蠻多地方都使用到這些 icon，倒也真的是很棒的解決方案
但是為了一個 Icon 就要讓使用者多下載數十到數百KB的檔案
過不了自己心裡那一關，也只能先放棄

也不想用 ^ 或 ︿ 來弄一個醜醜的箭頭
只好再發揮碼農的精神，用 CSS 弄一個按鈕出來
尺寸定義是使用 rem 來設定，在預設的情況下寬高分別是 40px、48px 及 56px
先來看一下手機上呈現出來的樣子

40px
48px
56px

如果網站原本就有使用 jQuery 甚至也有使用 Bootstrap 4 都可以直接套用
若原本沒有使用 jQuery 則需要先導入，方法可以參考 jQuery 官網，或直接在下面的語法前面再加上一行

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

先提供 HTML + JavaScript 的語法，可直接放在 </body> 前面即可

<button type="button" id="BackTop" class="toTop-arrow"></button>
<script>
$(function(){
	$('#BackTop').click(function(){ 
		$('html,body').animate({scrollTop:0}, 333);
	});
	$(window).scroll(function() {
		if ( $(this).scrollTop() > 300 ){
			$('#BackTop').fadeIn(222);
		} else {
			$('#BackTop').stop().fadeOut(222);
		}
	}).scroll();
});
</script>

$(function(){

$('#BackTop').click(function(){

$('html,body').animate({scrollTop:0}, 333);

});

$(window).scroll(function() {

if ( $(this).scrollTop() > 300 ){

$('#BackTop').fadeIn(222);

} else {

$('#BackTop').stop().fadeOut(222);

}

}).scroll();

});

</script>

<button></button> 在網頁增加一個按鈕
第 4~6 行：當點擊這個按鈕時，自動捲動到網頁最上方，0.333秒完成捲動的動作
第 7 行：當瀏覽器的捲軸在移動時，就執行 8~12 行的程式
第 8 行：判斷網頁可視範圍的最上方距離網頁頂端是否超過 300 px
第 9 行：超過 300 px，以0.222秒的特效顯示按鈕
第 11 行：未超過 300 px，先停止正在進行的特效，接著以 0.222 秒的特效隱藏按鈕

再來是 CSS 語法，三種尺寸一起提供

/* 40px */
.toTop-arrow {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 33%;
	opacity: 0.6;
	background: #000;
	cursor: pointer;
	position:fixed;
	right: 1rem;
	bottom: 1rem;
	display: none;
}
.toTop-arrow::before, .toTop-arrow::after {
	width: 18px;
	height: 5px;
	border-radius: 3px;
	background: #f90;
	position: absolute;
	content: "";
}
.toTop-arrow::before {
	transform: rotate(-45deg) translate(0, -50%);
	left: 0.5rem;
}
.toTop-arrow::after {
	transform: rotate(45deg) translate(0, -50%);
	right: 0.5rem;
}
.toTop-arrow:focus {outline: none;}


/* 48px */
.toTop-arrow {
	width: 3rem;
	height: 3rem;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 33%;
	opacity: 0.6;
	background: #000;
	cursor: pointer;
	position:fixed;
	right: 1rem;
	bottom: 1rem;
	display: none;
}
.toTop-arrow::before, .toTop-arrow::after {
	width: 25px;
	height: 6px;
	border-radius: 3px;
	background: #f90;
	position: absolute;
	content: "";
}
.toTop-arrow::before {
	transform: rotate(-45deg) translate(0, -50%);
	left: 0.42rem;
}
.toTop-arrow::after {
	transform: rotate(45deg) translate(0, -50%);
	right: 0.42rem;
}
.toTop-arrow:focus {outline: none;}

/* 56px */
.toTop-arrow {
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 33%;
	opacity: 0.6;
	background: #000;
	cursor: pointer;
	position:fixed;
	right: 1rem;
	bottom: 1rem;
	display: none;
}
.toTop-arrow::before, .toTop-arrow::after {
	width: 31px;
	height: 7px;
	border-radius: 3px;
	background: #f90;
	position: absolute;
	content: "";
}
.toTop-arrow::before {
	transform: rotate(-45deg) translate(0, -50%);
	left: 0.4rem;
}
.toTop-arrow::after {
	transform: rotate(45deg) translate(0, -50%);
	right: 0.4rem;
}
.toTop-arrow:focus {outline: none;}

100

101

102

/* 40px */

.toTop-arrow {

width: 2.5rem;

height: 2.5rem;

padding: 0;

margin: 0;

border: 0;

border-radius: 33%;

opacity: 0.6;

background: #000;

cursor: pointer;

position:fixed;

right: 1rem;

bottom: 1rem;

display: none;

}

.toTop-arrow::before, .toTop-arrow::after {

width: 18px;

height: 5px;

border-radius: 3px;

background: #f90;

position: absolute;

content: "";

}

.toTop-arrow::before {

transform: rotate(-45deg) translate(0, -50%);

left: 0.5rem;

}

.toTop-arrow::after {

transform: rotate(45deg) translate(0, -50%);

right: 0.5rem;

}

.toTop-arrow:focus {outline: none;}

/* 48px */

.toTop-arrow {

width: 3rem;

height: 3rem;

padding: 0;

margin: 0;

border: 0;

border-radius: 33%;

opacity: 0.6;

background: #000;

cursor: pointer;

position:fixed;

right: 1rem;

bottom: 1rem;

display: none;

}

.toTop-arrow::before, .toTop-arrow::after {

width: 25px;

height: 6px;

border-radius: 3px;

background: #f90;

position: absolute;

content: "";

}

.toTop-arrow::before {

transform: rotate(-45deg) translate(0, -50%);

left: 0.42rem;

}

.toTop-arrow::after {

transform: rotate(45deg) translate(0, -50%);

right: 0.42rem;

}

.toTop-arrow:focus {outline: none;}

/* 56px */

.toTop-arrow {

width: 3.5rem;

height: 3.5rem;

padding: 0;

margin: 0;

border: 0;

border-radius: 33%;

opacity: 0.6;

background: #000;

cursor: pointer;

position:fixed;

right: 1rem;

bottom: 1rem;

display: none;

}

.toTop-arrow::before, .toTop-arrow::after {

width: 31px;

height: 7px;

border-radius: 3px;

background: #f90;

position: absolute;

content: "";

}

.toTop-arrow::before {

transform: rotate(-45deg) translate(0, -50%);

left: 0.4rem;

}

.toTop-arrow::after {

transform: rotate(45deg) translate(0, -50%);

right: 0.4rem;

}

.toTop-arrow:focus {outline: none;}

若有需要自行再調整，下面是概要說明

按鈕大小：.toTop-arrow 中的 width 及 height
按鈕顏色：.toTop-arrow 中的 background 搭配 opacity 設定透明度
按鈕外型：.toTop-arrow 中的 border-radius，50% 變成圓形按鈕，0% 則是正方形
浮動位置：.toTop-arrow 中的 right 及 bottom
箭頭顏色：.toTop-arrow::before, .toTop-arrow::after 中的 background
箭頭粗細：.toTop-arrow::before, .toTop-arrow::after 中的 height: 7px; 及 width: 31px;
箭頭位置：.toTop-arrow::before 的 left 及 .toTop-arrow::after 的 right，及兩者的 translate(0, -50%)

原理：

Button 是一個按鈕，可以設定按鈕顯示的內容。這裡保持空的內容
利用 ::before 和 ::after 這兩個偽元素(pseudo-elements)在 button 的「內容」的前後各產生一個元素
將這兩個偽元素設定 content: ""; 使其在畫面上產生可視元素
透過 position: absolute; 讓兩個偽元素定位時參考上層容器(button)
用 width 和 height 兩個屬性來設定偽元素的大小，變成兩個細長條的區塊
以 border-radius 設定圓角，及 background 設定兩個區塊的顏色
最後以 transform 的 rotate function 旋轉角度、translate function 調整位置
並搭配 left 和 right 來讓兩個直條塊狀組合成一個箭頭

也可以搭配 CSS 中的 @media 使用，設定在不同顯示模式使用不同的按鈕樣式

這樣就可以使用 CSS 產生一個外觀看起來還不錯的按鈕
將上面的 CSS 放在網頁中或是合併到原本的 CSS 檔案
可省下不少連線下載的資料量，除了減少行動裝置的數據流量
最重要的是縮短行動裝置的載入時間