實現平滑滾動以獲得更好的用戶體驗。

平滑滾動是一項現代微動畫功能，可透過允許在頁面各部分之間輕鬆導航來增強使用者體驗。平滑滾動不是立即跳到各個部分，而是創造流暢、引人入勝的過渡。這是一種保持用戶參與度的好方法，而且不會因為突然的跳躍而讓他們不知所措。

在本文中，我們將探討兩種實現平滑滾動的方法：

• 使用CSS
• 使用 JavaScript

讓我們先深入了解如何使用 CSS 實現平滑滾動。

為什麼要用 CSS 實現平滑滾動？

CSS是實現平滑滾動最簡單也是最受歡迎的方法。由於無需加載額外的 JavaScript，因此它可以提高頁面效能，從而使其更快、更輕。讓我們繼續在我們的專案中實現這一點。

第 1 步：建立導覽列

首先，讓我們建立一個簡單的導覽列來儲存導覽連結。這些連結會將使用者帶到頁面上的特定部分。

確保導航連結是錨標記，因為它們允許我們輕鬆跳到頁面的特定部分。

第 2 步：建立部分
現在我們有了導航鏈接，讓我們建立相應的部分。

我們為每個導航連結建立了部分。

第 3 步：新增可捲動內容
為了平滑滾動，您的頁面需要足夠的內容來滾動。讓我們添加一些虛擬文字以使頁面可滾動。

終於有足夠的內容讓我們的頁面可以捲動了。

第 4 步：將導航連結到各個部分
我們將使用錨標記的 href 屬性來引用我們想要滾動到的部分。只需新增#，後面跟著對應的部分 ID。

因此，我們基本上在上圖中所做的是使用 href 屬性來引用我們希望導航連結轉到的部分。

第 5 步：將適當的識別碼 (id) 分配給適當的部分

所以我們現在所做的只是使用 href 屬性和 Id 將每個連結分配到適當的部分。因此，href 為 #section-one 的導航連結將與 idsection-one

的部分相符

現在，當我們點擊導航連結時，我們將進入該部分。
但有一點我們注意到，不太流暢，頁面跳到該部分，體驗不太好。

第 6 步：使用 CSS 加入平滑滾動
若要實現平滑捲動，請在 html 元素中新增單一 CSS 屬性。

當我們將scroll-behavior屬性新增到html中時，我們可以在點擊導航連結時看到平滑的滾動效果。

如何運作

在底層，錨標記中的 href 屬性傳統上用於導航到外部頁面或 URL。但是，當與 # 後面跟著部分 ID 配對時，錨標記會「尋找」目前頁面並捲動到對應的部分。透過加入滾動行為：平滑； CSS 屬性，我們在各部分之間創建流暢的過渡，增強整體使用者體驗。

實現平滑滾動的另一種方法是使用 JAVASCRIPT 來處理它。
我們也可以透過幾個步驟來實現這一點：

注意：每個部分仍會像以前一樣具有指定的 id。

第1步：建立scrollIntoView函數

我們可以在 javascript 中建立一個函數，該函數將使用scrollIntoView 方法來實現相同的結果。像這樣：

第 2 步：點選連結時嵌入功能

我們將把scrollIntoView函數嵌入到附加到每個導航連結的事件監聽器中。這樣，當單擊連結時，頁面會平滑地滾動到引用的部分。

這也可以根據您用於開發的框架進行重構。

這是我們在建立直覺網頁時實現平滑滾動的兩種簡單方法。

如果您有問題或回饋，請發表評論。

以上是實現平滑滾動以獲得更好的用戶體驗。的詳細內容。更多資訊請關注PHP中文網其他相關文章！