不食盐

不食盐

阅读：347

最后更新：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

最后

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

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

文章分类 学习笔记
文章标签 JavaScript优化返回顶部
不食盐

不食盐

发布了 183 篇文章获得点赞 0获得阅读 347

版权申明

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

one
two
three

关于作者

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

相关文章

css3像素点背景怎么写
typecho附件独立...
pikpak入门级教程...
使用Cloudflar...
屏蔽PC端访问的方法