网站开发日志: jQuery 动画卷页

当一个网页内容很长，为了方便读者返回页首，我们通常会在网页底部加上个链接并且把链接的href属性设为'#'；当用户点击这个链接，页面就会快速返回到顶端，同时当前链接名后会加上一个‘#’。你是否觉得这种卷页方法有些生硬？jQuery提供一种动画卷页方法，简单易用。先看看效果 (拉到页面底部点击'返回页首')，还不错吧？:-) 接下来我将介绍如何实现这一特效。

首先给这些‘返回页首’的链接加上个Class：

<a href="#" class="backtotop" target="_self">返回页首↑</a>
<!--把所有返回页首的链接加上class，例如：backtotop-->

然后加入下面jQuery代码，你可以把这行代码放在</body>前，或者其它位置。当然你还要在<head>里包含jQuery库文件。（如果你对jQuery一无所知，那么建议阅读我写的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}, 'slow');
      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, Jquery

3 条评论:

噢，你以前也用这个，但就是浏览器的兼容性不好，以至于一直用一段很长的代码来实现的！！你这里解决的不错哈！！收藏了！！

作者 xiaorsz, 时间 2009年2月17日上午9:14
$('html,body')就可以了，不用写if else

作者 py, 时间 2009年3月23日上午5:27
py，您好！

不知道你试过没有，但是据我所知，$('html,body')在Opera下行不通。

作者 D Cai, 时间 2009年3月23日上午9:49

发表评论

指向此帖子的链接:

<$BlogBacklinkTitle$>: <$BlogBacklinkSnippet$>
<$I18NPostedByBacklinkAuthor$> @ <$BlogBacklinkDateTime$>

jQuery 动画卷页

相关文章:

3 条评论:

发表评论

指向此帖子的链接:

关于

上一个