Elevator.js,一个缓(增)解(加)尴尬的返回顶部插件

隔壁老李 发布在 源码 2020-07-03

Elevator.js是一个返回顶部的小插件,如他的名字一项,他就像一个真正的电梯,当你点击按钮时会放着舒缓的音乐,缓解页面滑动带来的尴尬(我在说什么?),当页面顺利的返回屏幕顶部时会有--叮~的一声提示(确定不会更尴尬吗)。

电梯.png

Elevator.js是一个独立的库,不需要引入JQ,用法极其简单。

首先引入Elevator.js

<script src="elevator.min.js"></script>

添加一个元素,将此元素调用到"滚动到顶部"功能

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

最后,你要是想看一下演示,可以点一下本站的返回顶部按钮,是的,我就是这么无聊!!

新鲜劲过了,本站返回顶部恢复原来的啦???

资源下载

赞赏
取消
扫码支持
评论 (2)
访客
Top