如何在您的網站上添加粘性返回頂部按鈕

已發表: 2019-06-18

我們都去過那裡。你找到了一個很棒的在線指南，一直滾動到底部，然後想，“哇，我很想看看這個網站還能提供什麼！”

但是你必須滾動。

全部。

這。

方法。

至。

這。

最佳。

然後你想…… “嗯，沒關係。” 並關閉頁面。

作為一名網頁設計師，這幾乎是您希望某人登陸您正在構建的網站時做的最後一件事。幸運的是，這一年是 2019 年，現代網頁設計最佳實踐為我們提供了解決這個常見 UX 問題的方法：粘性返回頂部按鈕。

什麼是粘性返回頂部按鈕？

也稱為滾動到頂部按鈕或轉到頂部圖像，粘性返回頂部按鈕是一種有用的導航元素，可幫助用戶返回他們正在查看的網頁的頂部。一個常見的 UI 模式是將此按鈕放置在屏幕的右下角，通過固定位置使其“粘性”，以便用戶向下滾動頁面時始終可以訪問它。

添加返回頂部按鈕之前需要考慮的事項

像任何流行的設計趨勢一樣，我鼓勵您在在您的網站上實施它之前退一步問自己：如果我要構建這個，我需要遵循哪些返回按鈕指南？

在構建滾動到頂部按鈕之前，需要回答以下幾個問題：

它將被放置在哪裡？
它應該有多大（或小）？
您應該遵循哪些設計模式才能保持品牌形象？（想想顏色、字體、圖標等）
它是否有覆蓋重要網站內容的風險，例如側邊欄中的信息？
在移動設備上會發生什麼？它會響應嗎？
你真的需要它嗎？*

*注意：您可以說今天的用戶習慣於在頁面上向下滾動（並向後滾動！），這將消除對返回頂部按鈕的“需求”。我的建議：測試一下！在點擊時添加 Google Analytics 事件或使用 Hotjar 等熱圖工具來查看您的網站訪問者如何與頁面互動。

要遵循的最佳“最佳實踐”是基於您自己網站和用戶的數據！

如何向您的 WordPress 網站添加粘性返回頂部按鈕

在本教程中，我將向您展示如何添加我們在 Layout 上使用的確切返回頂部按鈕！唯一的區別是我們將我們的標題放在屏幕頂部的粘性標題中，而不是右下角。（但別擔心，這是同一個概念！）

專業提示：雖然本教程不是太高級，但我仍然建議在臨時站點或本地環境中嘗試，因此您的實時站點絕對沒有風險。如果您需要快速設置，請查看 Local，這是一款非常易於使用的免費本地 WordPress 應用程序。

讓我們開始吧！我將逐步介紹該過程的每一步，您也可以按照 Flywheel 自己的前端工程師 Josh Masen 提供的這個 Codepen。

或者，查看這個添加粘性返回頂部按鈕的視頻教程！

請參閱 Josh Lawler (@joshuamasen) 在 CodePen 上的 Pen ES6 Scroll-to-top 按鈕。

對於這個粘性返回頂部按鈕教程，我們將使用三種語言：

用於創建按鈕的標記的 HTML
CSS 為按鈕設置樣式並使其與您的品牌相匹配
JavaScript 讓它“工作”並定義按鈕的行為

在 HTML 中，您會發現以下幾行：

<a class="top-link hide" href="" id="js-top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Back to top</span>
</a>

這將是您的粘性返回頂部按鈕！您可以看到我們添加了一個名為.top-link的 CSS 類，並且正在使用一些簡單的 JavaScript 來“讓它工作”。我們還為按鈕使用了內嵌 SVG。

除了 SVG，您還可以使用圖像文件或字體圖標來創建按鈕。然而，我們更喜歡 SVG 方法，因為：

它不會像光柵圖像那樣在不同的屏幕尺寸下像素化。
跨瀏覽器普遍支持 SVG。（耶，用戶體驗！）
使用 CSS 設置樣式很容易，因此您可以非常輕鬆地更改它的所有內容。
它只需要一行代碼，使其輕量級並且更好地提高站點性能。

您將在 HTML 中找到的最後一個真正重要的部分是這一行：

<span class="screen-reader-text">Back to top</span>

這對於使用屏幕閱讀器的用戶來說至關重要，並將提高您的 WordPress 網站的可訪問性。（把它想像成圖像的 alt 標籤，但對於滾動到頂部按鈕！）

現在讓我們更多地談談那個 CSS 類.top-link 。我們使用它來實際設置按鈕的樣式，您可以在其中定義質量，例如按鈕的大小、周圍的填充量、顏色等。

.top-link {
  transition: all .25s ease-in-out;
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-flex;
  
 cursor: pointer;
 align-items: center;
 justify-content: center;
 margin: 0 3em 3em 0;
 border-radius: 50%;
 padding: .25em;
 width: 80px;
 height: 80px;
 background-color: #F8F8F8;

注意：我們使用 Sass（一種樣式表語言）來更快地編寫 CSS。在此處了解有關此預處理器的更多信息。

此片段中的幾個重要部分： transition: all .25s ease-in-out ; 控制按鈕在屏幕上出現或消失的“速度”，以及position: fixed ；是什麼讓按鈕“粘”到你想要的位置。

接下來，您將看到.show和.hide的規則。我們將使用 JavaScript 在這些類之間切換，以便告訴瀏覽器按鈕應該（或不應該）出現在頁面上的時間。

  .show {
    visibility: visible;
    opacity: 1;
  }
  
  .hide {
    visibility: hidden;
    opacity: 0;
  }

在我們進入 JavaScript 之前，我們將在 CSS 中添加幾行代碼。

svg {
 fill: #000;
 width: 24px;
 height: 12px;
}

&:hover {
 background-color: #E8E8E8;

 	svg {
	 fill: #000000;
	}
}

這些類將為箭頭本身設置 SVG 圖像的樣式，並告訴瀏覽器在用戶將鼠標懸停在按鈕上時如何顯示按鈕。

最後，我們將添加一些 CSS 來為屏幕閱讀器隱藏“回到頂部”的文本。

// Text meant only for screen readers.
.screen-reader-text {
	position: absolute;
	clip-path: inset(50%);
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
	clip: rect(1px, 1px, 1px, 1px);

	&:focus {
		display: block;
		top: 5px;
		left: 5px;
		z-index: 100000; // Above WP toolbar
		clip-path: none;
		background-color: #eee;
		padding: 15px 23px 14px;
		width: auto;
		height: auto;
		text-decoration: none;
		line-height: normal;
		color: #444;
		font-size: 1em;
		clip: auto !important;
	}
}

現在到 JavaScript 了！我們將在不加載 jQuery 的情況下執行此操作，這將有助於保持代碼的輕量級和快速加載。

第一個變量將幫助瀏覽器找到按鈕。

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');

接下來，我們將創建一個函數，如果用戶滾動超出初始窗口的高度，則顯示滾動到頂部按鈕。

const scrollFunc = () => {
  // Get the current scroll value
  let y = window.scrollY;
  
  // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
  if (y > 0) {
    scrollToTopButton.className = "top-link show";
  } else {
    scrollToTopButton.className = "top-link hide";
  }
};

我們還將添加一個事件偵聽器，它將在用戶滾動時進行監視（因此我們知道他們在頁面上的位置）。

window.addEventListener("scroll", scrollFunc);

快完成了！接下來，我們需要定義使按鈕真正將用戶帶回頁面頂部的函數。為此，我們將為距頁面頂部的像素數創建一個變量。如果該數字大於 0，該函數會將其設置回 0，將我們帶到頂部！

我們還會在這裡添加一點動畫，所以跳躍不會太突然。

const scrollToTop = () => {
  // Let's set a variable for the number of pixels we are from the top of the document.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
  // We'll also animate that scroll with requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo takes an x and a y coordinate.
    // Increase the '10' value to get a smoother/slower scroll!
    window.scrollTo(0, c - c / 10);
  }
};

最後但同樣重要的是，我們只需要告訴頁面在有人點擊我們的粘性返回頂部按鈕時運行該功能。

// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}

下一篇：發現開發人員喜愛的 19 個 WordPress 插件

下載此電子書以獲取我們最推薦給開發人員的插件列表！我們發現所有這些插件都易於使用，不會對您的網站造成太大影響，而且非常可靠。

而已！您現在將在您的 WordPress 網站上擁有一個功能齊全且可自定義的粘性返回頂部按鈕。要查看整個教程，請記得查看 Flywheel 自己的前端工程師 Josh Masen 的這個 Codepen！