“返回顶部”按钮已成为绝大多数网站必备的一个重要元素,它的样式及实现方法也各有千秋。本文将介绍一个带在电梯真实音乐的“返回顶部”JS插件: Elevator.js 。
Elevator.js通过添加电梯音乐,使网页在返回顶部过程中犹如电梯向上运行,到达目的地后,并伴有“到达”的提示音( Demo展示 )。
使用介绍:
Elevator.js是一个独立的标准JS库,并未借助JQuery之类的其他JS库,使用起来相当方便。元素的所有样式均可自行定义。
1.首先需要创建Elevator对像,为其添加音乐子元素。代码如下:
<script> // Elevator script included on the page, already. window.onload = function() { var elevator = new Elevator({ mainAudio: '/src/to/audio.mp3', endAudio: '/src/to/end-audio.mp3' }); } // You can run the elevator, by calling. elevator.elevate(); </script>
2.接着添加HTML元素,通过单击该元素,可实现页面返回顶部的功能,代码如下:
<div class="elevator-button">Back to Top</div> <script> // Elevator script included on the page, already. window.onload = function() { var elevator = new Elevator({ element: document.querySelector('.elevator-button'), mainAudio: '/src/to/audio.mp3', endAudio: '/src/to/end-audio.mp3' }); } </script>
3.如果你不想使用音效,可以将音效替换成页面返回顶部所需时间间隔。代码如下:
<div class="elevator-button">Back to Top</div> <script> // Elevator script included on the page, already. window.onload = function() { var elevator = new Elevator({ element: document.querySelector('.elevator-button'), duration: 1000 // milliseconds }); } </script>
(翻译:陈秋歌)
内容来源: Github