如何用 jQuery實現錨點連結的滑動效果?

Comment

UI/UX設計
psl

一般網頁文章太長的時候,我們會利用錨點來協助網友找到他要的資料。
錨點就像書籤一樣,當單一網頁的內容很多的時候,我們可以將內容分成數個段落,在每一段內容前面插入一個錨點,利用錨點超連結的功能,讓網頁在閱讀上好像分成數個獨立的章節一樣,方便網友閱讀。

這也有點像回到頂端的按鈕,當點擊後會滑動至頁面頂端。

 

範例:

首先我們先寫上HTML代碼

簡單來說就是一個

標籤配上

當點擊a標籤時,頁面就會移動至id="section1″的位置,那要讓頁面移到哪就移動該標籤的位置就好了

 

接著我們寫上JQ代碼,這是讓頁面可以有看的到移動效果

 

有興趣的朋友可以使用試看看~跟大夥兒分享^^~

 

frankbite-關注UI設計/前端/網頁,如果您喜歡我們的文章,歡迎 Follow 我們的 Facebook 專頁,我們將為您提供最新、最實用的資訊!

%e6%9c%aa%e5%91%bd%e5%90%8d-1_03