JQuery — scrollTop, offset 運用

讓選單滑動到指定區塊 / 設定按鈕回到最上方

Photo by Domenico Loia on Unsplash

常看到很多網站都有這樣的小動畫功能，點了選單可以滑動到指定的位置(區塊)，或是當瀏覽頁面時，總是有個可以回到最上方的按鈕，今天就來實作練習一下。

主要會用到 JQuery 的 animate( )、offset( ) 兩個方法寫出功能。

覺得簡單易懂的影片教學

animate ( ) 語法

.animate( properties [, duration ] [, easing ] [, complete ] )

properties 必需，規定產生動畫效果的 css 樣式和值

內容是用物件的寫法，{ }包住，裡面可以放多個值，像是width,top,height,opacity….當然還有即將要用到的 scrollTop

duration 可選，指動畫完成的速度

可以用毫秒為單位，或是 slow，normal，fast，預設是 normal

easing 可選，設置動畫速度的函數

內建有 swing，linear 兩種可用

complete 可選，動畫執行完接著要執行的函式

offset ( )

返回偏移座標

$(selector).offset()

返回的對象包含兩個整數屬性 left, top，以像素為單位，只對可見元素有效，表示與 document 的 x 軸和 y 軸偏移距離

設置偏移座標

$(selector).offset(value)

value 為必須，以像素為單位的兩個屬性 left 和 top

指定元素距離 document 的 x 軸和 y 軸有多遠。

使用函式設置偏移座標

$(selector).offset(function(index,oldoffset))

規定一個函式，返回被選取元素新偏移的座標

index 可選， 返回集合中元素的 index 位置
oldoffset 可選，返回被選元素的當前作標

實作範例

解析程式碼

補充 ：

有一個新的 CSS 屬性， scroll-behavior 可以產生類似的效果

預設是 auto，沒有任何滑動動畫，目前瀏覽器支援度不高，所以可以再觀望是否要使用。

參考資料：

offset( ) 用法
animate( ) 方法
animate scrollTop 影片
scroll-behavior MDN
scroll-behavior 滑順的捲動效果