不食盐
阅读:86
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
最后
你要是想看一下演示,可以点一下本站的返回顶部按钮,是的,我就是这么无聊!!
新鲜劲过了,本站返回顶部恢复原来的啦???
版权申明
本文系作者 @不食盐 原创发布在走小路的博客站点。未经许可,禁止转载。
相关推荐
“请在微信客户端中打开链接”一招就可以解决
遇到pc浏览器打开页面出现必须在微信中打开的提示,就用这招解决。不能保证百分百可用Mozilla/5.0 (Linux; Android 5.0; SM-N9100 Build/LRX21V) > AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 > Chrome/37.0.0.0 Mobile Safari/537.36 > MicroMessenger/6.0.2.56_r958800.520 NetType/WIFI

jquery实现响应式滑动解锁
未验证前评论提交按钮为灰色状态,滑动验证通过后才能提交。实现代码如下,请自行拷贝修改
一个书签快速复制各种格式的网页标题和链接
前言使用方法很简单,将以下代码添加为书签即可。先选中代码,再拖到书签栏,修改新增书签标题名称,或者手动添加书签,复制下面的代码,然后新建一个书签,名称自定义,网址粘贴刚刚复制的代码即可。使用时只需选择你想要复制的标题和网址的类型点击对应书签,就复制好了。书签代码复制标题无弹窗代码:javascript:(function(){ const el = document.createElement('textarea'); el.value = decodeURIComponent(document.title); document.body.appendChild(el); el.sele...
WordPress_5.9.0_中文正式版发布及优化代码
WordPress,全球广泛使用的知名免费开源网站博客程序。WordPress是一种使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设自己的网站,也可以把WordPress 当作一个内容管理系统(CMS)来使用。WordPress 还是一个免费的开源项目,在GNU通用公共许可证下授权发布。WordPress新版必备优化代码:<!--添加优化代码到主题目录functions.php文件--> /*彻底关闭自动更新(核心程序/主题/插件/翻译自动更新*/ add_filter('automatic_updater_disabled', '__ret...

Typecho博客优化教程
开启永久链接开启永久链接对文章和页面进行重写地址,可以去掉地址栏中的index.php,对seo也是很友好的。启用重写功能,选择文章路径,选择你喜欢的风格,也可以自定义风格,下面有可选参数,本站使用的是个性化定义 /{cid}.html。然后保存设置,会出现(重写功能检测失败, 请检查你的服务器设置,如果你仍然想启用此功能, 请勾选这里。),勾选这里,再次点击保存设置就可以了。更换Gravatar头像源在网站根目录下 ,找到config.inc.php文件,在最前面加入下面的代码。define('__TYPECHO_GRAVATAR_PREFIX__', 'https://sdn.gee...

js获取滚动高度,显示返回顶部按钮
好久没有这个需求了,有个网站需要这个功能,特地上网找了一圈,csdn上一大堆的,但使用中发现都报错,不想去研究了,直接来现成的.//获取滚动条的位置 function getScrollTop() { var scrollPos; if (window.pageYOffset) { scrollPos = window.pageYOffset; } else if (document.compatMode && document.compatMode != 'BackCompat')...