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>
版权声明
文章来源: https://www.uihtm.com/jquery/8751.html
版权说明:仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。我们非常重视版权问题,如有侵权请邮件(44784009#qq.com)与我们联系处理。敬请谅解!






















