Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.npmjs.com/package/elevator.js below:

elevator.js - npm

Finally, a "back to top" button that behaves like a real elevator, by adding elevator music to quietly soothe the awkwardness that can ensue when being smoothly scrolled to the top of the screen.

This is very serious stuff, here's a demo!

Elevator.js is a stand alone library (no jquery, or the likes) so usage is pretty straight forward. All styling of elements is up to you. Elevator.js only handles the audio management, and the scroll functionality!

Elevator.js lives entirely within the js realm, which makes things fairly simple to use.

You'll need to create a new instance of Elevator, and pass it some audio elements.

<script>
 
window.onload = function() {
  var elevator = new Elevator({
    mainAudio: '/src/to/audio.mp3',
    endAudio: '/src/to/end-audio.mp3'
  });
}
 
elevator.elevate();
</script> 

You can also add an "element" option, clicking this element will invoke the "Scroll to top" functionality, we all love and crave.

<div class="elevator-button">Back to Top</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> 

If you don't want to scroll to the top, a custom target can be specified by adding a "targetElement" option:

<div class="elevator-button">Take the elevator to the 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 point on the page with some extra padding on the top, simply add the "verticalPadding" option:

<div class="elevator-button">Take the elevator to the target</div>
 
<script>
 
window.onload = function() {
  var elevator = new Elevator({
    element: document.querySelector('.elevator-button'),
    targetElement: document.querySelector('#elevator-target'),
    verticalPadding: 100,  
    mainAudio: '/src/to/audio.mp3',
    endAudio: '/src/to/end-audio.mp3'
  });
}
</script> 

If you're really serious (boring), you don't have to use audio... and can also set a fixed time to scroll to the top

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

If you use elevator.js in combination with other code, you might want 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() {
         
       },
       endCallback: function() {
         
       }
   });
}
</script> 

The package is also available via NPM

Elevator.js is covered by the MIT License.

Audio in the Demo (sourced from BenSound) is licenced under Creative Commons.

Copyright (C) 2015 ~ Tim Holman ~ timothy.w.holman@gmail.com

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4