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 相关文章推荐
javascript英文日期(有时间)选择器
May 02 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
详解a++和++a的区别
Aug 30 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
Vue-component全局注册实例
Sep 06 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 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 fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
编程语言Python的发展史
2014/09/26 Python
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
利用Python开发实现简单的记事本
2016/11/15 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
求职信写作要突出重点
2014/01/01 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
员工考核评语大全
2014/04/26 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
心灵点滴观后感
2015/06/02 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
vue实现滑动解锁功能
2022/03/03 Vue.js
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript