如何在網頁中加入一個回到頂端的按鈕 跳到主要內容

如何在網頁中加入一個回到頂端的按鈕


網頁Top按鈕 (網頁回到頂端)


參考原文：https://ezbox.idv.tw/131/back-to-top-button-without-images/


最近剛好在做一個網站練習專案，發現當頁面內容很長的時候很不好操作，常常滑鼠滾來滾去的，就查了一下有沒有簡單快速加入 website 的UI。當然類似的UI在很多第三方套件上有更多更好看的選擇，不過相對的也會帶入很多複雜的程式碼以及相對大的檔案內容，造成頁面讀取的負荷，找到的這個方式可以以最簡單的方式建立功能。


首先先確定是要用使用HTML+CSS+JQuery的方式來製作UI

如果網站原本就有使用 jQuery 甚至也有使用 Bootstrap 4 都可以直接套用，若原本沒有使用 jQuery 則需要先導入。


JQuery導入方法

首先要在HTML加入一行宣告


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


提供 JavaScript 的語法，可直接放在 head 裡面


  <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>

尺寸定義這邊是使用 rem 來設定，在預設的情況下寬高分別是 40px、48px 及 56px

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;}*/


另外附上參數說明：

按鈕大小：.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%)






標籤：

留言

張貼留言

這個網誌中的熱門文章

HTML前端學習的第一步

一個好的編輯器能幫助我們輕鬆地進行學習程式撰寫 大部分剛接觸電腦程式的人，會對編輯器產生一些疑問，下面來帶大家一步步認識 什麼是編輯器？ 電腦儲存文字的方式是透過文字編碼的方式，用位元來表示文字。而如果一個檔案是以文字編碼的形式儲存的，稱為文字檔。  在我們的電腦裡面，檔案被分為兩大部分： 文字檔：以文字編碼的形式儲存 二進位檔：其他編碼形式儲存 而文字編輯器，顧名思義就是用來讓我們輸入文字可以進行編輯的應用程式，Word、記事本、Pages…等或是線上的 Google Docs 都可以算是文字編輯器。 為什麼要用編輯器？ Microsoft 的 Front Page 和 Adobe Dreamweaver 都是非常快速且容易入門的軟體，但是遇到複雜結構的HTML時，設計頁面往往都不是很正確的顯示，最重要的一點是這兩款都是付費的軟體，公司不見得都會提供使用。 我過去個人的經驗是使用  Dreamweaver 來製作 wireframe ，當時不算是做正式的網頁，只是快速的製作與RD溝通的介面來討論後台介面，而  Dreamweaver 在對應一些簡單的畫面時是蠻方便的，可以快速的選取以及修改，但當頁面越來越多層的時候畫面就開始不明原因的跑掉，後面都是直接開html使用瀏覽器來做確認，這樣的情況下軟體就沒什麼使用價值了。 而近年來的編輯器除了撰寫 HTML 以及 CSS 之外，也提供了非常多的插件供不同的語法使用，非常方便。 編輯器選擇 編輯器種類其實蠻多的，包括常見的  Visual Studio Code 、  Notepad++ 、   Brackets 、 Sublime  等等，  Survery的過程中，我首先選澤了 Sublime 作為第一次學習接觸的工具，最後選擇  Sublime 的原因其實也蠻簡單的，就只是買的線上課程講師使用這個編輯器XD，不過當然也是想使用看看來做比較，後續應該也會嘗試著使用  Visual Studio Code 以 及  Brackets 來做比較。 Sublime 官網下載點 https://www.sublimetext.com/3 ▲Sublime官網 另外其實也有蠻多線上編輯器可以選擇，我個人是推薦...
張貼留言
閱讀完整內容

Sublime編輯器環境安裝教學

  環境安裝 安裝好 Sublime 之後，在未安裝 P lugins  之前 Sublime 與一般文字編輯器沒有其他差別，然而 安裝 plugins 之前，我們必須先安裝 PackageControl 這個插件，這個插件可以快速地下載以及管理所有其他的插件。 ▲未安裝 Plugings  第一步：安裝PackageControl 本文採用 mac OS 來作為我們說明的系統環境，首先我們在編輯器上使用快捷鍵 Command + Shift + P 可以叫出選項。 Open the command palette Win/Linux:  ctrl+shift+p , Mac:  cmd+shift+p Type  Install Package Control , press  enter 補充說明一下這是 Sublime text3 最新版的安裝方式，網路上有很多舊的文章還是 text2 版本須貼上語法的方式。 ▲開啟介面  ▲輸入 PackageControl 並點擊 Install Package 第二步：安裝必要插件 待安裝完畢後，會看到跳到下方這個畫面，此時就可以來安裝各種 Plugins。還記得上一篇： HTML前端學習的第一步  中有提到在 PackageControl官網  中的 popular中可以看到目前最常被下載使用到的插件。 首先我們來看看有哪些推薦的插件： 1.Emmet 功能：編碼快捷鍵，可以快速完成編碼，實用性非常高。 說明頁面： https://packagecontrol.io/packages/Emmet ▲輸入 Emmet 並點擊安裝 ▲Emmet功能展示 2.AutoFileName 功能：快速自動輸入文件名稱。 說明頁面： https://packagecontrol.io/packages/AutoFileName ▲AutoFileName功能展示 3.ConvertToUTF8 功能：文件自動轉碼成UTF-8。 說明頁面： https://packagecontrol.io/packages/ConvertToUTF8 4.JQuery 功能：JQuery函數提示。 說明頁面： https://packagecontro...
張貼留言
閱讀完整內容