jQuery 入門教學 – 滑動式 go Top

傳統的錨點超連結(anchor

貼心的網頁設計師,都會在網頁的最底下製作「go Top」連結,回頁面頂端的功能,讓使用都閱讀完整篇網頁之後,可以很方便地回到網頁上方的主選單區,這是增加網頁可用性最簡單,也最常見的方法之一。

在 HTML 之內要製作這種功能,是透過錨點超連結(anchor)來達成,首先要在網頁的最上面先設定一個命名錨點 <a name=”TT” id=”TT”></a> 設定完之後,再到網頁的最下面使用超連結 <a href=”#TT”>Top</a> 就可以了。

JavaScript 程式設計  - jQuery 入門教學 - 滑動式 go Top - fly01_thumb

以上的做法,是只使用簡易的 HTML 語法,呈現的效果就是點選後,網頁的畫面就直接跳回頂端。

 

使用 jQuery 語法產生動態的效果

現在,我們來使用 jQuery 語法,為單純的「go Top」連結加入動態的效果,讓網頁慢慢的滑滑滑上去,兼顧網頁的可用性,又增加了趣味的效果。

JavaScript 程式設計  - jQuery 入門教學 - 滑動式 go Top - fly02_thumb

範例預覽 http://www.flycan.com/example/2011_06_09_jq_go_top/index.html

範例下載 http://www.flycan.com/example/2011_06_09_jq_go_top/2011_06_09_jq_go_top.zip

 

jQuery 語法說明

JavaScript 程式設計  - jQuery 入門教學 - 滑動式 go Top - fly03_thumb 

第 3 行:網頁下面的 go top 連結在 HTML 內使用 id 命名為 goTop ,所以在 jQuery 要寫成 $(“#goTop”)

第 5 行 : $(“html,body”) 主要可控製整個網頁畫面,指令 animate( ) 就是用來做動畫效果的,屬性 scrollTop 可以控製捲軸的位置

第 7 行 :return false 讓原本的 HTML 超連結失去效果,讓他專心做我們寫的 jQuery 效果。

 

jQuery 語法很簡單吧,短短兩三行就完成了,節能減碳又環保,效果一極棒!讚!

 

當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!

 

關於「姜智豪 老師」

於 1996 年開始從事網頁設計工作 20 多年,參與設計過許多網站專案的開發,一直熱衷網頁設計工作至今。從 1998 年開始從事教學工作,對於網頁設計教學有相當高的熱忱,於 2006 年創立飛肯設計學苑。主要專長 Photoashop、 HTML、CSS、RWD、JavaScript、jQuery 等網頁技術,對於 SEO 優化搜尋引擎排名提昇,以及 Instructional Design 教學專案設計亦有深入的研究。
posted in JavaScript 程式設計 and tagged , , , , .

留言功能已關閉。