简约的返回顶部效果（jQuery）

浏览数：38 / 时间：2015年06月09日

博客建好也快一个月了，主题是在原有主题的基础上做的修改，喜欢这样的清新简约风格，为了更好的体验，以后也会经常做修改。

一般博客的文章都比较长，看到下面不能快速返回到顶部还真是不方便，今天自己动手写了一个，是基于 jQuery 的，用起来还不错。

常见的“返回顶部”分这么3种：把返回顶部按钮放在页面最底部的，返回顶部按钮在滚动距离大于一定的距离后显示出来的，还有就是滚动距离大于 0 的时候就显示出来，喜欢最后这种，嗯，就它了~ 做好了贴出来共享下：）

HTML：

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

<div class="returnTop" title="嗖的就上去了！">
  <span class="s"></span>
  <span class="b"></span>
  返回顶部
</div>

CSS：

用 css 去模拟三角形很给力，不仅兼容性很好，而且可用的地方还非常多。这个东西用嘴说不好理解，看例子就一目了然了，更多的用 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);
  });

});