不食盐

不食盐

阅读:86

最后更新:2022/05/08/ 5:39:31

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

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

最后

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

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

版权申明

本文系作者 @不食盐 原创发布在走小路的博客站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 86

相关文章