Elevator.js

底部，一个“返回顶部”按钮，其行为就像真正的电梯，通过添加电梯音乐来安静地缓解平滑滚动到屏幕顶部时可能出现的尴尬。

这是非常严肃的事情，这里有一个演示！

指示

Elevator.js是一个独立的库（没有 jquery 或类似的库），因此使用非常简单。元素的所有样式都取决于您。Elevator.js只处理音频管理和滚动功能！

JS

Elevator.js完全生活在 js 领域中，这使得使用起来相当简单。

您需要创建 的新实例 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>

您还可以添加一个“元素”选项，单击此元素将调用“滚动到顶部”功能，我们都喜欢和渴望。

<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>

如果您不想滚动到顶部，可以通过添加“targetElement”选项来指定自定义目标：

<div class="elevator-button">Take the elevator to the target</div>

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

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

如果您想滚动到页面上顶部有一些额外填充的点，只需添加“verticalPadding”选项：

<div class="elevator-button">Take the elevator to the target</div>

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

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

如果你真的很认真（无聊），就不用音频了……还可以设置固定时间滚动到顶部

<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>

如果您将Elevator.js 与其他代码结合使用，您可能需要使用回调

<script>
window.onload = function() {
   new Elevator({
       element: document.querySelector('.elevator-button'),
       mainAudio: '/src/to/audio.mp3',
       endAudio: '/src/to/end-audio.mp3',
       duration: 5000,
       startCallback: function() {
         // is called, when the elevator starts moving
       },
       endCallback: function() {
         // is called, when the elevator reached target level
       }
   });
}
</script>

NPM

该软件包也可通过NPM获得

执照

Elevator.js 包含在 MIT 许可证中。

Demo 中的音频是通过Pond5购买的，您需要获得自己的许可。

版权所有 (C) ~ Tim Holman ~ timothy.w.holman@gmail.com