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>