傳統的錨點超連結（anchor）
貼心的網頁設計師，都會在網頁的最底下製作「go Top」連結，回頁面頂端的功能，讓使用都閱讀完整篇網頁之後，可以很方便地回到網頁上方的主選單區，這是增加網頁可用性最簡單，也最常見的方法之一。
在 HTML 之內要製作這種功能，是透過錨點超連結（anchor）來達成，首先要在網頁的最上面先設定一個命名錨點 <a name="TT" id="TT"></a> 設定完之後，再到網頁的最下面使用超連結 <a href="#TT">Top</a> 就可以了。
以上的做法，是只使用簡易的 HTML 語法，呈現的效果就是點選後，網頁的畫面就直接跳回頂端。
使用 jQuery 語法產生動態的效果
現在，我們來使用 jQuery 語法，為單純的「go Top」連結加入動態的效果，讓網頁慢慢的滑滑滑上去，兼顧網頁的可用性，又增加了趣味的效果。
jQuery 語法說明
第 3 行：網頁下面的 go top 連結在 HTML 內使用 id 命名為 goTop ，所以在 jQuery 要寫成 $("#goTop")
第 5 行 ： $("html,body") 主要可控製整個網頁畫面，指令 animate( ) 就是用來做動畫效果的，屬性 scrollTop 可以控製捲軸的位置
第 7 行 ：return false 讓原本的 HTML 超連結失去效果，讓他專心做我們寫的 jQuery 效果。
jQuery 語法很簡單吧，短短兩三行就完成了，節能減碳又環保，效果一極棒！讚！
沒有留言:
張貼留言