JQuery 動畫卷頁返回頂部動畫特效(兼容Chrome)

2019-11-21 00:44:39

字體：大中小

來源：轉載

供稿：網友

首先給這些‘返回頁首'的鏈接加上個Class：
<a href="#" class="backtotop" target="_self">返回頁首↑</a>
然后加入下面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的區域里頁首的距離 

上一篇：JavaScript 10件讓人費解的事情

下一篇：jQuery 處理表單元素的代碼

學習交流

索泰發布一款GTX 1070 Mini迷你版本:小機

索泰發布一款GTX 1070 Mini迷你版本:小機箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

JQuery 動畫卷頁 返回頂部 動畫特效(兼容Chrome)

JQuery 動畫卷頁返回頂部動畫特效(兼容Chrome)