模擬電梯運行的“返回頂部”jQuery插件：Elevator.js

“返回頂部”按鈕已成為絕大多數網站必備的一個重要元素，它的樣式及實現方法也各有千秋。本文將介紹一個帶在電梯真實音樂的“返回頂部”JS插件：Elevator.js。

Elevator.js通過添加電梯音樂，使網頁在返回頂部過程中猶如電梯向上運行，到達目的地后，并伴有“到達”的提示音（Demo展示）。

使用介紹：

Elevator.js是一個獨立的標準JS庫，并未借助JQuery之類的其他JS庫，使用起來相當方便。元素的所有樣式均可自行定義。

1.首先需要創建Elevator對像，為其添加音樂子元素。代碼如下：

    <script>  
    // Elevator script included on the page, already.  

    window.onload = function() {  
      var elevator = new Elevator({  
        mainAudio: '/src/to/audio.mp3',  
        endAudio: '/src/to/end-audio.mp3'  
      });  
    }  

    // You can run the elevator, by calling.  
    elevator.elevate();  
    </script>  

2.接著添加HTML元素，通過單擊該元素，可實現頁面返回頂部的功能，代碼如下：

    <div class="elevator-button">Back to Top</div>  

    <script>  
    // Elevator script included on the page, already.  

    window.onload = function() {  
      var elevator = new Elevator({  
        element: document.querySelector('.elevator-button'),  
        mainAudio: '/src/to/audio.mp3',  
        endAudio: '/src/to/end-audio.mp3'  
      });  
    }  
    </script>  

3.如果你不想使用音效，可以將音效替換成頁面返回頂部所需時間間隔。代碼如下：

    <div class="elevator-button">Back to Top</div>  

    <script>  
    // Elevator script included on the page, already.  

    window.onload = function() {  
      var elevator = new Elevator({  
        element: document.querySelector('.elevator-button'),  
        duration: 1000 // milliseconds  
      });  
    }  
    </script>  

（翻譯：陳秋歌）

內容來源：Github