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 語法很簡單吧,短短兩三行就完成了,節能減碳又環保,效果一極棒!讚!

關於 姜智豪 老師

從事網頁設計工作和教學工作 20 多年,參與設計過許多網站開發專案。從 1998 年開始從事教學工作,對於網頁設計教學有相當高的熱忱,於 2006 年創立飛肯設計學苑。主要專長 HTML、CSS、JavaScript、jQuery、RWD 等網頁設計技術,對於 SEO 搜尋引擎排名最佳化,以及 Instructional Design 教學專案設計亦有深入的研究。

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in JavaScript 程式設計 and tagged , , , , .

迴響已被關閉。