提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JQuery动画卷页返回顶部动画特效(兼容Chrome)

jQueryChrome动画 返回 兼容 特效 顶部
2023-06-13 09:14:16 时间
首先给这些‘返回页首"的链接加上个Class：
<ahref="#"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");
returnfalse;//返回false可以避免在原链接后加上#
}
else{
jQuery("html").animate({scrollTop:0},1500);
returnfalse;
}
});
});

这上述代码里，我用到jQuery("body").animate({scrollTop:0},"slow");我们可以根据实际需要更改卷页的速度，你可以用"slow"、"fast"、或者用具体数字，例如1000(代表一秒,注意用具体数字时不用加单引号)。另外，{scrollTop:0}表示返回页首，如果你只是想让页面卷到你要的特定位置，我们可以使用标签(ID)的方法，例如：要移到某个ID为"myID"的区域(<divid="myID">....</div>)顶部，我们可以使用类似的方法，但是要先计算这个区域距离页首的距离，代码如下：
复制代码代码如下:
jQuery("body").animate({scrollTop:jQuery("#myID").offset().top},"slow");
//jQuery("#myID").offset().top可以计算ID为myID的区域里页首的距离

相关文章