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

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

赞 (0)

相关推荐

  • js+JQuery返回顶部功能如何实现

    js+JQuery返回顶部功能如何实现

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可以

  • 用jQuery实现的智能隐藏、滑动效果的返回顶部代码

    在线DEMO:传送门 HTML代码(放在页面任意位置,并用CSS美化): 复制代码 代码如下: <p id="back-to-top"><a href="#top"><span></span>回到顶部</a></p> JS代码: <script type="text/javascript" src="js/jquery-1.7.2.min.js"&g

  • jquery左边浮动到一定位置时显示返回顶部按钮

    复制代码 代码如下: <script> $(function(){ $(window).bind('scroll',function(){ if ($(document).scrollTop() >200) { $(".asd-return").show(1); }else{ $(".asd-return").hide(1); } }) $(".asd-return").click(function(){ $('body,htm

  • 基于jquery的返回顶部效果（兼容IE6）

    最近也在学jquery,就顺便记录一下了. HTML 复制代码 代码如下: <div class="scroll"></div> <script type="text/javascript" src="../skins/css/jQuery.js" charset="UTF-8"></script> <script type="text/javascript&qu

  • jQuery scrollFix滚动定位插件

    当用户向上或向下滚动页面到一定位置时,目标元素开始固定定位(position:fixed),当回滚到原位置时目标元素恢复到原状态,可以定制触发滚动相对屏幕位置和触发滚动方向,兼容IE6 [插件参数] $(".target_element").scrollFix( [ "top" | "bottom" | length(可以为负,表示相对bottom), [ "top" | "bottom" ] ]); 第一

  • jQuery返回定位插件详解

    一.jQuery 提供开发者开发插件的几种模式 1.$.extend();     //这个方法是绑定在$上面的.可以通过$直接调用 2.$.fn.方法名     //这个方法是绑定在Dom对象上面的可以通过$('').方法名();调用 3.$.widget   //通过jQuery UI 部件工厂模式创建. 二.插件的开发过程 1.$.extend(); 这个方法其实很简单,只是像$上面添加了一个静态的方法而已.主要用途是对插件api的扩展. eg: //$.extend();为了防止,变量和

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

    首先给这些'返回页首'的链接加上个Class: <a href="#" class="backtotop" target="_self">返回页首↑</a> <!--把所有返回页首的链接加上class,例如:backtotop-->然后加入下面jQuery代码,你可以把这行代码放在</body>前,或者其它位置.当然你还要在<head>里包含jQuery库文件.( 复制代码 代码如下:

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

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

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

  • jQuery实现小火箭返回顶部特效

    jquery实现小火箭返回顶部案例,供大家参考,具体内容如下 1. 滚动页面,当页面距离顶部超出1000px,显示小火箭. 封装在scroll函数里,当前页面距离顶部为$(window).scrollTop >=1000 小火箭显示和隐藏用fadeIn和fadeOut //当页面超出1000px的时候,让小火箭显示,如果小于1000px,则隐藏 $(window).scroll(function () { if ($(window).scrollTop() >= 1000) { $("

  • jquery结合css实现返回顶部功能

    css操作 CSS $("").css(name|pro|[,val|fn]) 位置 $("").offset([coordinates]) $("").position() $("").scrollTop([val]) $("").scrollLeft([val]) 尺寸 $("").height([val|fn]) $("").width([val|fn]) $(

  • javascript简单实现跟随滚动条漂浮的返回顶部按钮效果

    javascript简单实现跟随滚动条漂浮的返回顶部按钮效果

    本文实例讲述了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果.分享给大家供大家参考,具体如下: 比较优秀的一款超过一屏高度才显示的,跟随滚动条漂浮的返回顶部按钮特效代码. 运行效果如下图所示: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

  • JavaScript实现返回顶部按钮案例

    JavaScript实现返回顶部按钮案例

    本文实例为大家分享了JavaScript实现返回顶部按钮的具体代码,供大家参考,具体内容如下 思路: 首先先设计出其静态样式,这里主要利用固定定位,将其固定在页面底部的某一位置处 .backtotop { position: fixed; bottom: 80px; right: 80px; width: 80px; height: 80px; background-color: #ccc; font-size: 20px; text-align: center; padding-top: 12

  • jQuery实现的个性化返回底部与返回顶部特效代码

    jQuery实现的个性化返回底部与返回顶部特效代码

    本文实例讲述了jQuery实现的个性化返回底部与返回顶部特效代码.分享给大家供大家参考,具体如下: 运用了所学习的jQuery特性,制作了这款效果,该效果集结了返回底部.返回顶部.网站留言导航三种功能,网站留言的链接你可以修改为任意一个您想导航的链接,这个可以灵活运用了.本款效果的亮点在于兼容性和动画效果,以及设计美观的箭头等. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-back-top-buttom-style-codes/

  • jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]

    jQuery脚本: <script type="text/javascript"> $(function() { var scrollDiv = document.createElement('div'); $(scrollDiv).attr('id', 'toTop').html('^ 返回顶部').appendTo('body'); $(window).scroll(function() { if ($(this).scrollTop() != 0) { $('#toT

  • jquery实现的动态回到顶部特效代码

    jquery实现的动态回到顶部特效代码

    本文实例讲述了jquery实现的动态回到顶部特效代码.分享给大家供大家参考,具体如下: 这款jquery动态回到顶部特效,不是一下子就回到了网页顶部,而是带点缓冲的效果,有动画效果,使用了jQuery插件,这是个非常常用的网页特效,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-back-top-dh-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT

随机推荐