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 相关文章推荐
广告切换效果(缓动切换)
May 27 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
最新最全的手机号验证正则表达式
Feb 24 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程序员的技术瓶颈分析
2011/07/17 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
python处理cookie详解
2014/02/07 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python六大开源框架对比
2015/10/19 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
python实现图片九宫格分割的示例
2021/04/25 Python
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python