Elevator.js是一个返回顶部的小插件，如他的名字一项，他就像一个真正的电梯，当你点击按钮时会放着舒缓的音乐，缓解页面滑动带来的尴尬（我在说什么？），当页面顺利的返回屏幕顶部时会有--叮~的一声提示（确定不会更尴尬吗）。
Elevator.js是一个独立的库，不需要引入JQ，用法极其简单。
首先引入Elevator.js
点击复制代码运行代码编辑模式Markup
<div class="elevator-button">返回顶部</div>
<script>
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">滚动到#elevator-target</div>
<script>
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>
如果要滚动到页面上的某处，
顶部有一些额外的填充，只需添加"垂直 Padding"选项：
<div class="elevator-button">滚动到100px</div>
<script>
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">固定滚动时间</div>
<script>
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>
下载
https://github.com/tholman/elevator.js
最后
你要是想看一下演示，可以点一下本站的返回顶部按钮，是的，我就是这么无聊！！
新鲜劲过了，本站返回顶部恢复原来的啦???
