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

已發表: 2023-02-12

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

但是你必須滾動。

全部。

這。

方式。

到。

這。

頂部。

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

作為網頁設計師，這幾乎是您最不希望別人在訪問您正在構建的網站時做的事情。 幸運的是，現代網頁設計最佳實踐為我們提供了解決這一常見用戶體驗問題的方法：粘性返回頂部按鈕。

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

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

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

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

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

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

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

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

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

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

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

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

請參閱 CodePen 上 Josh Lawler (@joshuamasen) 的 Pen ES6 滾動到頂部按鈕。

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

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

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

 <a class="頂部鏈接隱藏" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">返回頂部</span>
</a>

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

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

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

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

 <span class="screen-reader-text">返回頂部</span>

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

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

 .top-link {
  過渡：所有 0.25 秒的緩入緩出；
  位置：固定；
  底部：0；
  右：0；
  顯示：內聯柔性；
  
 游標：指針；
 對齊項目：居中；
 證明內容：居中；
 保證金：0 3em 3em 0；
 邊界半徑：50%；
 填充：.25em；
 寬度：80px；
 高度：80px；
 背景色：#F8F8F8；

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

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

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

 。展示 {
    能見度：可見；
    不透明度：1；
  }
  
  。隱藏 {
    可見性：隱藏；
    不透明度：0；
  }

在我們進入 JavaScript 之前，我們將再添加幾行到 CSS。

 svg {
 填寫：#000；
 寬度：24px；
 高度：12px；
}
&:懸停{
 背景色：#E8E8E8；
 	svg {
	 填充：#000000；
	}
}

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

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

 // 僅供屏幕閱讀器使用的文本。
.screen-reader-text {
	位置：絕對；
	剪輯路徑：插圖（50%）；
	保證金：-1px；
	邊界：0；
	填充：0；
	寬度：1px；
	高度：1px；
	溢出：隱藏；
	自動換行：正常！重要；
	剪輯：矩形（1px，1px，1px，1px）；
	＆：重點 {
		顯示：塊；
		頂部：5px；
		左：5px；
		z-索引：100000； // 在 WP 工具欄上方
		剪輯路徑：無；
		背景色：#eee；
		填充：15px 23px 14px；
		寬度：自動；
		高度：自動；
		文字修飾：無；
		行高：正常；
		顏色：#444；
		字體大小：1em；
		剪輯：自動！重要；
	}
}

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

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

 // 為我們的按鈕元素設置一個變量。
const scrollToTopButton = document.getElementById('js-top');

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

 const scrollFunc = () => {
  // 獲取當前滾動值
  讓 y = window.scrollY;
  
  // 如果滾動值大於窗口高度，讓我們給滾動到頂部按鈕添加一個類來顯示它！
  如果（y > 0）{
    scrollToTopButton.className = "頂部鏈接顯示";
  } 別的 {
    scrollToTopButton.className = "頂部鏈接隱藏";
  }
};

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

 window.addEventListener("滾動", scrollFunc);

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

我們還將在此處添加一點動畫，因此跳躍不會太突然。

 const scrollToTop = () => {
  // 讓我們為距文檔頂部的像素數設置一個變量。
  const c = document.documentElement.scrollTop || 文檔.body.scrollTop;
  
  // 如果該數字大於 0，我們將滾動回 0，即文檔的頂部。
  // 我們還將使用 requestAnimationFrame 為滾動設置動畫：
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  如果（c > 0）{
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo 採用 x 和 y 坐標。
    // 增加“10”值以獲得更平滑/更慢的滾動！
    window.scrollTo(0, c - c / 10);
  }
};

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

 // 當按鈕被點擊時，運行我們上面的 ScrolltoTop 函數！
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  滾動到頂部（）;
}

就是這樣！ 您現在將在您的 WordPress 網站上擁有一個功能齊全且可自定義的粘性返回頂部按鈕。