繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
- Javascript
- 代码生成器 document.write()
- 不错的文字特效，逐字变色效果
- javascript下用键盘控制层的移动的代码
- 有提示确定与取消功能的弹出式窗的代码
- js下弹出窗口的变通
- 在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
- 用JAVASCRIPT如何给<textarea></textarea>赋值
- 将光标定位到textarea的某一行的javascript代码
- 把textarea中字符串里含有的回车换行替换成<br>的javascript代码
- 让textarea控件的滚动条怎是位与最下方
- 用javascript实现改变TEXTAREA滚动条和按钮的颜色，以及怎样让滚动条变得扁平
- 在textarea中屏蔽js的某个function的javascript代码
- textarea的value是html文件源代码,存成html文件的代码
- 在textarea中显示html页面的javascript代码
- 用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
- 如何做到打开一个页面，过几分钟自动转到另一页面
- JS 建立对象的方法
- 运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
- JS Timing
- 用javascript实现图片马赛克后显示并切换
Javascript 中的 JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 404 ::
收藏到网摘: n/a
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的区域里页首的距离
评论 (0) All
