JQuery 動畫卷頁 返回頂部 動畫特效(兼容Chrome)
更新時間：2010年02月15日 15:13:10 作者：
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'); 我們可以根據(jù)實際需要更改卷頁的速度，你可以用'slow'、'fast'、或者用具體數(shù)字，例如1000(代表一秒,注意用具體數(shù)字時不用加單引號)。 另外，{scrollTop:0}表示返回頁首，如果你只是想讓頁面卷到你要的特定位置，我們可以使用標簽(ID)的方法，例如：要移到某個ID為'myID'的區(qū)域(<div id="myID">....</div>)頂部，我們可以使用類似的方法，但是要先計算這個區(qū)域距離頁首的距離，代碼如下：
jQuery('body').animate({scrollTop:jQuery('#myID').offset().top}, 'slow');
//jQuery('#myID').offset().top可以計算ID為myID的區(qū)域里頁首的距離
<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'); 我們可以根據(jù)實際需要更改卷頁的速度，你可以用'slow'、'fast'、或者用具體數(shù)字，例如1000(代表一秒,注意用具體數(shù)字時不用加單引號)。 另外，{scrollTop:0}表示返回頁首，如果你只是想讓頁面卷到你要的特定位置，我們可以使用標簽(ID)的方法，例如：要移到某個ID為'myID'的區(qū)域(<div id="myID">....</div>)頂部，我們可以使用類似的方法，但是要先計算這個區(qū)域距離頁首的距離，代碼如下：
復制代碼 代碼如下:
jQuery('body').animate({scrollTop:jQuery('#myID').offset().top}, 'slow');
//jQuery('#myID').offset().top可以計算ID為myID的區(qū)域里頁首的距離
相關文章
今天主要講如何給主要的控件賦值，因為在做網(wǎng)站的時候，很多時候需要初始化表單，所有給控件賦值就成必然的了。2010-08-08
這篇文章主要介紹了jQuery表單域屬性過濾器用法,實例分析了:checked、:enabled、:disabled:、selected等常用表單域屬性過濾器使用技巧,需要的朋友可以參考下2015-02-02
將JQuery1.2.6升級到JQuery1.4，有幾天下班沒有關閉ajax輪詢網(wǎng)頁，第二天早上來，內存耗盡，發(fā)現(xiàn)此內存泄漏在IE6上不存在(IE7未測試),IE8上存在2010-10-10
這篇文章主要介紹了jQuery如何設置和獲取HTML、文本和值,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了jQuery的幾種選擇器詳解,Query 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素, 它基于已經存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器,需要的朋友可以參考下2023-05-05
下面小編就為大家?guī)硪黄猨Query實現(xiàn)div橫向拖拽排序的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
jQuery計算文本框字數(shù)及限制文本框字數(shù)的方法
一個中文算兩個，一個符號或數(shù)字，英文，算一個。（如果是規(guī)定140個字，乘以2，那么就是280個）。需要用到Math.ceil方法，因為最后還是要除以2來還原顯示給用戶的字數(shù);2016-03-03
當點擊提交信息的時候，會把用戶在注冊甜的信息收集并以div彈出的方式提示個用戶預覽以確定信息的準確性，感興趣的朋友可以參考下，希望對你有所幫助2013-04-04
passwordStrength 基于jquery的密碼強度檢測代碼使用介紹
我們設定密碼強度等級為10，制作一張圖片表示每個等級狀態(tài)，給密碼框綁定keyup事件，通過keyup事件獲取密碼值，然后使用正則進行判斷密碼強度等級，然后變換相應的圖片2011-10-10
對jquery的ajax進行二次封裝以及ajax緩存代理組件:AjaxCache詳解
下面小編就為大家?guī)硪黄獙query的ajax進行二次封裝以及ajax緩存代理組件:AjaxCache詳解。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-04-04