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


Posted in Javascript onFebruary 15, 2010

首先给这些‘返回页首'的链接加上个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的区域里页首的距离
Javascript 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
vscode中使用npm安装babel的方法
Aug 02 Javascript
jQuery 处理表单元素的代码
Feb 15 #Javascript
jQuery 树形结构的选择器
Feb 15 #Javascript
jQuery 处理网页内容的实现代码
Feb 15 #Javascript
JS getMonth()日期函数的值域是0-11
Feb 15 #Javascript
不同浏览器对回车提交表单的处理办法
Feb 13 #Javascript
Jquery iframe内部出滚动条
Feb 11 #Javascript
jquery 问答知识整理
Feb 11 #Javascript
You might like
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
php post换行的方法
2020/02/03 PHP
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
python读取oracle函数返回值
2016/07/18 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
《美丽的田园》教学反思
2014/03/01 职场文书
个人合作协议书范本
2014/04/18 职场文书
团支部推优材料
2014/05/21 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
紫日观后感
2015/06/05 职场文书
人民币使用说明书
2019/04/17 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
python中__slots__节约内存的具体做法
2021/07/04 Python
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle