jQuery实现简约的返回顶部效果

常见的“返回顶部”分这么3种：1、把返回顶部按钮放在页面最底部的2、返回顶部按钮在滚动距离大于一定的距离后显示出来的3、滚动距离大于 0 的时候就显示出来 现在我们来实现第三种效果

HTML：

用两个 span 标签去模拟一个向上的箭头。

<div class="returnTop" title="返回顶部">
  <span class="s"></span>
  <span class="b"></span>
  返回顶部
</div>

CSS：

用 css 去模拟三角形很给力，兼容性很好

.returnTop { position: fixed; _position: absolute; right: 10px; bottom: 200px; _bottom: auto; display: none; width: 40px; height: 40px; border: 1px solid #61b72e; border-radius:4px; background: #fff; box-shadow: 0 0 5px #F5F5F5; text-indent: -9999px; cursor: pointer;
}
.returnTop .s { position: absolute; top: -2px; _top: -20px; left: 10px; width: 0; height: 0; border-width: 10px; border-color: transparent transparent #61b72e; border-style: dashed dashed solid;
}
.returnTop .b { position: absolute; top: 18px; left: 16px; height: 12px; width: 8px; background: #61b72e;
}

Javascript：

代码很容易看懂，这里主要注意的是 IE6 定位那块：

!-[1,] 是一个俄国人写的，利用 IE 与标准浏览器在处理数组的 toString 方法时的差异，6个字符就可以判断出 IE 浏览器，再加上 IE6 不支持 XMLHttpRequest 对象，就能更稳健的判断出 IE6 了。

scrollTopNum + winHeight 等于滚动条垂直方向的偏移量 + 当前屏幕的高度 = 完整网页的高度。

$(function(){
  // 给 window 对象绑定 scroll 事件
  $(window).bind("scroll", function(){

      // 获取网页文档对象滚动条的垂直偏移
      var scrollTopNum = $(document).scrollTop(),
          // 获取浏览器当前窗口的高度
          winHeight = $(window).height(),
          returnTop = $("div.returnTop");

      // 滚动条的垂直偏移大于 0 时显示，反之隐藏
      (scrollTopNum > 0) ? returnTop.fadeIn("fast") : returnTop.fadeOut("fast");

      // 给 IE6 定位
      if (!-[1,]&&!window.XMLHttpRequest) {
          returnTop.css("top", scrollTopNum + winHeight - 200);
      }

  });

  // 点击按钮后，滚动条的垂直方向的值逐渐变为0，也就是滑动向上的效果
  $("div.returnTop").click(function() {
      $("html, body").animate({ scrollTop: 0 }, 100);
  });

});

返回顶部还有一个最简单的方法：  <a href=”javascript:scroll(0,0)”>返回顶部</a> 

/***************************火柴的DEMO****************************/

DEMO                   Download