JQuery 動(dòng)畫卷頁(yè) 返回頂部 動(dòng)畫特效(兼容Chrome)
更新時(shí)間：2010年02月15日 15:13:10 作者：
JQuery 動(dòng)畫卷頁(yè) 返回頂部 動(dòng)畫特效(兼容Chrome) ,學(xué)習(xí)jquery的朋友可以測(cè)試下。
首先給這些‘返回頁(yè)首'的鏈接加上個(gè)Class：
<a href="#" class="backtotop" target="_self">返回頁(yè)首↑</a>
<!--把所有返回頁(yè)首的鏈接加上class，例如：backtotop-->然后加入下面jQuery代碼，你可以把這行代碼放在</body>前，或者其它位置。當(dāng)然你還要在<head>里包含jQuery庫(kù)文件。（
jQuery(document).ready(function() {
jQuery('.backtotop').click(function(){
jQuery('html').animate({scrollTop:0}, 'slow');
}
就這么簡(jiǎn)單？基本上是！但是使用jQuery('html')在Safari和Chrome(記得在什么地方看到過：chrome使用的是safari的核)下選擇不到我們要的對(duì)象。好在在這兩種瀏覽器下，我們可以使用jQuery('body')來(lái)替代。因此為了讓代碼的兼容性更強(qiáng)，我們可以加入對(duì)瀏覽器的判斷，這里使用到j(luò)Query提供jQuery.browser的方法。注意: 在jQuery1.3里，這種方法已經(jīng)不建議使用。jQuery1.3新增jQuery.support的方法，用于展示不同瀏覽器各自特性和bug的屬性集合，也就是說(shuō)jQuery1.3不在建議對(duì)瀏覽器進(jìn)行判斷，而建議直接對(duì)某個(gè)特性進(jìn)行判斷。但是我不知道這個(gè)選擇器的問題應(yīng)該屬于哪個(gè)特性，因此，我還是使用舊的方法。(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;
}
});
});
這上述代碼里，我用到j(luò)Query('body').animate({scrollTop:0}, 'slow'); 我們可以根據(jù)實(shí)際需要更改卷頁(yè)的速度，你可以用'slow'、'fast'、或者用具體數(shù)字，例如1000(代表一秒,注意用具體數(shù)字時(shí)不用加單引號(hào))。 另外，{scrollTop:0}表示返回頁(yè)首，如果你只是想讓頁(yè)面卷到你要的特定位置，我們可以使用標(biāo)簽(ID)的方法，例如：要移到某個(gè)ID為'myID'的區(qū)域(<div id="myID">....</div>)頂部，我們可以使用類似的方法，但是要先計(jì)算這個(gè)區(qū)域距離頁(yè)首的距離，代碼如下：
jQuery('body').animate({scrollTop:jQuery('#myID').offset().top}, 'slow');
//jQuery('#myID').offset().top可以計(jì)算ID為myID的區(qū)域里頁(yè)首的距離
<a href="#" class="backtotop" target="_self">返回頁(yè)首↑</a>
<!--把所有返回頁(yè)首的鏈接加上class，例如：backtotop-->然后加入下面jQuery代碼，你可以把這行代碼放在</body>前，或者其它位置。當(dāng)然你還要在<head>里包含jQuery庫(kù)文件。（
復(fù)制代碼 代碼如下:
jQuery(document).ready(function() {
jQuery('.backtotop').click(function(){
jQuery('html').animate({scrollTop:0}, 'slow');
}
就這么簡(jiǎn)單？基本上是！但是使用jQuery('html')在Safari和Chrome(記得在什么地方看到過：chrome使用的是safari的核)下選擇不到我們要的對(duì)象。好在在這兩種瀏覽器下，我們可以使用jQuery('body')來(lái)替代。因此為了讓代碼的兼容性更強(qiáng)，我們可以加入對(duì)瀏覽器的判斷，這里使用到j(luò)Query提供jQuery.browser的方法。注意: 在jQuery1.3里，這種方法已經(jīng)不建議使用。jQuery1.3新增jQuery.support的方法，用于展示不同瀏覽器各自特性和bug的屬性集合，也就是說(shuō)jQuery1.3不在建議對(duì)瀏覽器進(jìn)行判斷，而建議直接對(duì)某個(gè)特性進(jìn)行判斷。但是我不知道這個(gè)選擇器的問題應(yīng)該屬于哪個(gè)特性，因此，我還是使用舊的方法。(jQuery.browser的方法在jQuery1.3里還是支持的)
復(fù)制代碼 代碼如下:
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;
}
});
});
這上述代碼里，我用到j(luò)Query('body').animate({scrollTop:0}, 'slow'); 我們可以根據(jù)實(shí)際需要更改卷頁(yè)的速度，你可以用'slow'、'fast'、或者用具體數(shù)字，例如1000(代表一秒,注意用具體數(shù)字時(shí)不用加單引號(hào))。 另外，{scrollTop:0}表示返回頁(yè)首，如果你只是想讓頁(yè)面卷到你要的特定位置，我們可以使用標(biāo)簽(ID)的方法，例如：要移到某個(gè)ID為'myID'的區(qū)域(<div id="myID">....</div>)頂部，我們可以使用類似的方法，但是要先計(jì)算這個(gè)區(qū)域距離頁(yè)首的距離，代碼如下：
復(fù)制代碼 代碼如下:
jQuery('body').animate({scrollTop:jQuery('#myID').offset().top}, 'slow');
//jQuery('#myID').offset().top可以計(jì)算ID為myID的區(qū)域里頁(yè)首的距離
您可能感興趣的文章:
- jQuery動(dòng)畫與特效詳解
- jQuery動(dòng)畫效果圖片輪播特效
- 基于jquery和svg實(shí)現(xiàn)超炫酷的動(dòng)畫特效
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示動(dòng)畫邊框特效
- 基于jquery css3實(shí)現(xiàn)點(diǎn)擊動(dòng)畫彈出表單源碼特效
- jQuery圖片切換動(dòng)畫特效
- jQuery+jRange實(shí)現(xiàn)滑動(dòng)選取數(shù)值范圍特效
- JQuery實(shí)現(xiàn)簡(jiǎn)單的圖片滑動(dòng)切換特效
- jquery實(shí)現(xiàn)滑動(dòng)特效代碼
- 基于jQuery制作小圖標(biāo)上下滑動(dòng)特效
- jQuery 常用特效實(shí)例小結(jié)【顯示與隱藏、淡入淡出、滑動(dòng)、動(dòng)畫等】
相關(guān)文章
今天主要講如何給主要的控件賦值，因?yàn)樵谧鼍W(wǎng)站的時(shí)候，很多時(shí)候需要初始化表單，所有給控件賦值就成必然的了。2010-08-08
這篇文章主要介紹了jQuery表單域?qū)傩赃^濾器用法,實(shí)例分析了:checked、:enabled、:disabled:、selected等常用表單域?qū)傩赃^濾器使用技巧,需要的朋友可以參考下2015-02-02
JQuery1.4+ Ajax IE8 內(nèi)存泄漏問題
將JQuery1.2.6升級(jí)到JQuery1.4，有幾天下班沒有關(guān)閉ajax輪詢網(wǎng)頁(yè)，第二天早上來(lái)，內(nèi)存耗盡，發(fā)現(xiàn)此內(nèi)存泄漏在IE6上不存在(IE7未測(cè)試),IE8上存在2010-10-10
這篇文章主要介紹了jQuery如何設(shè)置和獲取HTML、文本和值,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了jQuery的幾種選擇器詳解,Query 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素, 它基于已經(jīng)存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器,需要的朋友可以參考下2023-05-05
jQuery實(shí)現(xiàn)div橫向拖拽排序的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery實(shí)現(xiàn)div橫向拖拽排序的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-07-07
jQuery計(jì)算文本框字?jǐn)?shù)及限制文本框字?jǐn)?shù)的方法
一個(gè)中文算兩個(gè)，一個(gè)符號(hào)或數(shù)字，英文，算一個(gè)。（如果是規(guī)定140個(gè)字，乘以2，那么就是280個(gè)）。需要用到Math.ceil方法，因?yàn)樽詈筮€是要除以2來(lái)還原顯示給用戶的字?jǐn)?shù);2016-03-03
jQuery獲取注冊(cè)信息并提示實(shí)現(xiàn)代碼
當(dāng)點(diǎn)擊提交信息的時(shí)候，會(huì)把用戶在注冊(cè)甜的信息收集并以div彈出的方式提示個(gè)用戶預(yù)覽以確定信息的準(zhǔn)確性，感興趣的朋友可以參考下，希望對(duì)你有所幫助2013-04-04
passwordStrength 基于jquery的密碼強(qiáng)度檢測(cè)代碼使用介紹
我們?cè)O(shè)定密碼強(qiáng)度等級(jí)為10，制作一張圖片表示每個(gè)等級(jí)狀態(tài)，給密碼框綁定keyup事件，通過keyup事件獲取密碼值，然后使用正則進(jìn)行判斷密碼強(qiáng)度等級(jí)，然后變換相應(yīng)的圖片2011-10-10
對(duì)jquery的ajax進(jìn)行二次封裝以及ajax緩存代理組件:AjaxCache詳解
下面小編就為大家?guī)?lái)一篇對(duì)jquery的ajax進(jìn)行二次封裝以及ajax緩存代理組件:AjaxCache詳解。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-04-04