簡約的返回頂部效果（jQuery）

博客建好也快一個月了，主題是在原有主題的基礎上作的修改，喜歡這樣的清新簡約風格，爲了更好的體驗，之後也會常常作修改。

通常博客的文章都比較長，看到下面不能快速返回到頂部還真是不方便，今天本身動手寫了一個，是基於 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);
  });

});

返回頂部還有一個最簡單的方法：  <a href=」javascript:scroll(0,0)」>返回頂部</a>

猛擊demo ☻