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

首先给这些‘返回页首'的链接加上个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的区域里页首的距离

时间: 2024-08-19 19:27:44

JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)_jquery的相关文章

带缓动效果返回顶部JS特效代码

返回顶部,这里可换成图片 带缓动效果的返回顶部JS特效代码 Page 1 Page 2 Page 3 Page 4 Page 5 Page 6

jQuery实现分章节锚点“回到顶部”动画特效代码_jquery

本文实例讲述了jQuery实现分章节锚点"回到顶部"动画特效.分享给大家供大家参考,具体如下: 这里演示基于jquery实现的分章节动画实现"回到顶部"的效果,可通过 网页顶部的数字序号直接进入网页的章节,当处于第二章节的时候,网页右侧会显示竖排的控制按钮,点击按钮会回到相应章节,其实也就是定义好的锚点,当然也可回到顶部,网页上见到的回顶部大多不是这个样子,所以本款效果还挺新颖. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js

使用jQuery创建人性化的返回顶部链接

之前写过关于创建人性化的返回顶部链接的文章,讨论了返回顶部链接需要具备哪些特点才能称得上人性化.一直以来我都觉得停留在视觉区域内的返回顶部连接更为完美一些,但由于对 javascript不熟悉,所以一直不知道如何在技术上实现,只能使用别人做好的javascript代码.最近一段时间学习了jQuery,发现其实用jQuery来写的话很简单,所以在这片文章里我会介绍一下如何自己动手创建简单而且很酷的返回顶部链接效果,让我们开始. jQuery返回顶部(查看示例) 一.HTML(基本结构)   <bo

jQuery动画特效实例教程_jquery

本文以实例形式详细讲述了jQuery动画特效的实现方法.分享给大家供大家参考之用.具体方法如下: 1.自制折叠内容块 内容块如下: <div class="module"> <div class="caption"> <span>标题</span> <img src="rollup.gif" alt="rollup" title="rolls up this mo

jQuery固定DIV实现返回顶部效果代码

效果代码如下   htm代码(这一段最好放在html中最下面)  代码如下 复制代码 <script type="text/javascript"> $(function(){ //gotop var options = {pageWidth:960,pageWGap:1,pageHGap:30,startline:100,duration:200,showBtntime:100} $('<a href="javascript:void(0);"

jQuery右侧选项卡焦点图片轮播特效代码分享_jquery

本文实例讲述了jQuery右侧选项卡焦点图片轮播特效代码.分享给大家供大家参考.具体如下: jQuery实现的右侧选项卡焦点图片轮播动画特效源码,是一段清新可爱的焦点图轮播代码,支持自动轮播与手动点击. 运行效果图: ----------------------查看效果-源码下载---------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式.  为大家分享的jQuery右侧选项卡焦点图片轮播特效代码如下 <!DOCTYPE html PUBLIC "-

jQuery实现固定在网页顶部的菜单效果代码_jquery

本文实例讲述了jQuery实现固定在网页顶部的菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery的固定在页面顶部的菜单,获取要定位元素距离浏览器顶部的距离,滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-top-fixed-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W

jQuery处理json数据返回数组和输出的方法_jquery

本文实例讲述了jQuery处理json数据返回数组和输出的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: /*print the json object  *  *$("selector").print_r_json(json,opts) : return formatted string (and print)  *sprint_r_json : just return the string;  *print_r_json : return the format

jQuery满屏焦点图左右滚动特效代码分享_jquery

本文实例讲述了jQuery横向擦除焦点图特效.分享给大家供大家参考.具体如下: jQuery焦点图是一款满屏左右滚动,带左右按钮,带缩略图,支持自动轮播的焦点图代码. 运行效果图:        -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery满屏焦点图左右滚动特效代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0