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 相关文章推荐
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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数组应该有多大的分析
2009/07/30 PHP
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
浅谈PHP进程管理
2019/03/08 PHP
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
Python中os.path用法分析
2015/01/15 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
两道JAVA笔试题
2016/09/14 面试题
公司大门门卫岗位职责
2014/06/11 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书