创意电梯上升效果的返回顶部js插件

当前位置:主页 > jQuery库 > 布局和界面 > 创意电梯上升效果的返回顶部js插件
创意电梯上升效果的返回顶部js插件
分享:

    插件介绍

    elevator.js是一款非常有创意的电梯上升效果的返回顶部js插件。该返回顶部(back to top)效果使用升降机的上升效果,使页面开始时慢速上升,再到加速,快到顶部时再减速。并且你还可以定制一段音乐效果来配合返回顶部的特效。

    浏览器兼容性

    浏览器兼容性
    时间:04-27
    阅读:
简要教程

elevator.js是一款非常有创意的电梯上升效果的返回顶部js插件。普通的返回顶部(back to top)效果都是快速或加速使页面回到顶部。该插件使用升降机的上升效果,使页面开始时慢速上升,再到加速,快到顶部时再减速。并且你还可以定制一段音乐效果来配合返回顶部的特效。

使用方法

该返回顶部插件没有使用任何外部依赖(jQuery等),使用十分简单直接。所有的样式你都可以自己使用CSS来控制。Elevator.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>            
              

你可以设置一个HTML元素,通过点击该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>                
              

你也可以不使用音效,而是设置在固定时间内返回顶部。

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