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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
Vue中的字符串模板的使用
May 17 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 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
用Socket发送电子邮件
2006/10/09 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
layui实现数据分页功能
2019/07/27 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
Python多进程同步简单实现代码
2016/04/27 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
django queryset相加和筛选教程
2020/05/18 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
python3处理word文档实例分析
2020/12/01 Python
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
英语自荐信范文
2013/12/11 职场文书
刑事代理授权委托书
2014/09/17 职场文书
初中差生评语
2014/12/29 职场文书
2015年教师节活动总结
2015/03/20 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
医德医风学习心得体会
2016/01/25 职场文书