DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> JQuery 動畫卷頁 返回頂部 動畫特效(兼容Chrome)
JQuery 動畫卷頁 返回頂部 動畫特效(兼容Chrome)
編輯:JQuery特效代碼     
首先給這些‘返回頁首'的鏈接加上個Class:
<a href="#" class="backtotop" target="_self">返回頁首↑</a>
<!--把所有返回頁首的鏈接加上class,例如:backtotop-->然後加入下面jQuery代碼,你可以把這行代碼放在</body>前,或者其它位置。當然你還要在<head>裡包含jQuery庫文件。(
代碼如下:
jQuery(document).ready(function() {
jQuery('.backtotop').click(function(){
jQuery('html').animate({scrollTop:0}, 'slow');
}

就這麼簡單?基本上是!但是使用jQuery('html')在Safari和Chrome(記得在什麼地方看到過:chrome使用的是safari的核)下選擇不到我們要的對象。好在在這兩種浏覽器下,我們可以使用jQuery('body')來替代。因此為了讓代碼的兼容性更強,我們可以加入對浏覽器的判斷,這裡使用到jQuery提供jQuery.browser的方法。注意: 在jQuery1.3裡,這種方法已經不建議使用。jQuery1.3新增jQuery.support的方法,用於展示不同浏覽器各自特性和bug的屬性集合,也就是說jQuery1.3不在建議對浏覽器進行判斷,而建議直接對某個特性進行判斷。但是我不知道這個選擇器的問題應該屬於哪個特性,因此,我還是使用舊的方法。(jQuery.browser的方法在jQuery1.3裡還是支持的)
代碼如下:
jQuery(document).ready(function() {
jQuery('.backtotop').click(function(){
if(jQuery.browser.safari) {//這裡判斷浏覽器是否為safari
jQuery('body').animate({scrollTop:0}, 'slow');
return false;//返回false可以避免在原鏈接後加上#
}
else{
jQuery('html').animate({scrollTop:0}, 1500);
return false;
}
});
});

這上述代碼裡,我用到jQuery('body').animate({scrollTop:0}, 'slow'); 我們可以根據實際需要更改卷頁的速度,你可以用'slow'、'fast'、或者用具體數字,例如1000(代表一秒,注意用具體數字時不用加單引號)。 另外,{scrollTop:0}表示返回頁首,如果你只是想讓頁面卷到你要的特定位置,我們可以使用標簽(ID)的方法,例如:要移到某個ID為'myID'的區域(<div id="myID">....</div>)頂部,我們可以使用類似的方法,但是要先計算這個區域距離頁首的距離,代碼如下:
代碼如下:
jQuery('body').animate({scrollTop:jQuery('#myID').offset().top}, 'slow');
//jQuery('#myID').offset().top可以計算ID為myID的區域裡頁首的距離
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved