1. 程式人生 > >jquery點選滾動條滑動到某個位置

jquery點選滾動條滑動到某個位置

對於錨點的平滑跳轉,我覺得要謹慎使用,在個人站點或是這個效果含有功能提示可以用一用,在一般的商業性質的網站上,權衡來講,不用更好,當然,這只是我的個人意見。jQuery庫已經為我們做了很多的工作了,所以,在jQuery下實現錨點的平滑跳轉是簡單輕鬆的。例如,我們要讓頁面平滑滾動到一個id為box的元素處,則jQuery程式碼只要一句話,如下:

$("html,body").animate({scrollTop: $("#box").offset().top}, 1000);

其中animate為jQuery自定義動畫方法,$(“#box”).offset().top表示id為box的jQuery物件距離頁面頂部的偏移值,1000表示平滑動畫執行的時間為1000毫秒,也就是1秒。

為了直觀的表示效果,我做個個簡單的demo頁面。您可以狠狠地點選這裡:錨點平滑跳轉demo

點選下圖所示文字連結,就可以看到平滑跳轉效果了:

平滑效果文字連結 張鑫旭-鑫空間-鑫生活