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>






![MBTI 16型人格职业性格测试源码PC+H5自适应完整版基于ThinkPHP框架[亲测可用]](https://www.icbot.net/upload/portal/20250429/32ccad646f32a5f4926b3b7b5ef3232a.png)















