Elevator.js， A slow (increase) solution (increase) embarrassing return to the top plug-in

Elevator.js is a small plug-in that returns to the top, such as its name. It is like a real elevator. When you click the button, it will play soothing music to ease the embarrassment caused by page sliding (what am I talking about?). When the page returns to the top of the screen smoothly, there will be a hint of "ding" (sure it will not be more awkward).

Elevator.js is an independent library. It does not need to introduce JQ, and its usage is extremely simple.

First introduce Elevator.js

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

Add an element to call this element to the "Scroll to Top" function

 <div class="elevator button">Return to the top</div> <script> window.onload = function() {   var elevator = new Elevator({     element: document.querySelector('.elevator-button'), MainAudio: '/src/to/audio. mp3',//Music during elevator operation EndAudio: '/src/to/end-audio.mp3'//Arrival prompt tone   }); } </script>

If you do not want to scroll to the top, you can specify a custom target by adding the Target Element option

 <div class="elevator button">Scroll to # 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>

If you want to scroll to a place on the page and there is some extra padding at the top, just add the "Vertical Padding" option:

 <div class="elevator button">Scroll to 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>

You can also not use audio You can also set a fixed time to scroll to the top (you are really boring)

 <div class="elevator button">Fixed rolling time</div> <script> window.onload = function() {   var elevator = new Elevator({     element: document.querySelector('.elevator-button'),     duration: 1000 // milliseconds   }); } </script>

If you use Elevator.js with other code, you may need to use callbacks

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

Finally, if you want to see the demo, you can click the Back to Top button on this site. Yes, I am so boring!!

The freshness has passed, and the site has returned to the top to restore the original???

Resource download