Convert Figma logo to code with AI

tholman logoelevator.js

Finally, a "back to top" button that behaves like a real elevator.

6,621
501
6,621
19
View on GitHub

Top Related Projects

cferdinandi's avatar

smooth-scroll

5,491

A lightweight script to animate scrolling to anchor links.

alvarotrigo's avatar

fullPage.js

35,222

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

locomotivemtl's avatar

locomotive-scroll

7,772

🛤 Detection of elements in viewport & smooth scrolling with parallax.

Quick Overview

Elevator.js is a lightweight JavaScript library that adds a "back to top" button to web pages, simulating an elevator experience. It provides a fun and interactive way for users to scroll back to the top of a page, complete with elevator music and floor indicators.

Pros

  • Easy to implement and customize
  • Adds a playful and unique user experience to websites
  • Lightweight and doesn't require any external dependencies
  • Compatible with most modern browsers

Cons

  • May not be suitable for more professional or serious websites
  • Limited functionality beyond the "back to top" feature
  • Elevator sound might be disruptive or annoying for some users
  • Requires JavaScript to be enabled in the browser

Code Examples

  1. Basic implementation:
window.onload = function() {
  var elevator = new Elevator({
    element: document.querySelector('.elevator-button'),
    targetElement: document.querySelector('#top-element'),
    duration: 1000
  });
}
  1. Adding custom audio:
var elevator = new Elevator({
  element: document.querySelector('.elevator-button'),
  mainAudio: '/path/to/custom-elevator-music.mp3',
  endAudio: '/path/to/custom-ding-sound.mp3'
});
  1. Customizing the button text:
var elevator = new Elevator({
  element: document.querySelector('.elevator-button'),
  buttonText: 'Back to Top'
});

Getting Started

  1. Include the Elevator.js script in your HTML file:
<script src="https://cdn.jsdelivr.net/npm/elevator.js@1.0.1/elevator.min.js"></script>
  1. Add a button element to your HTML:
<button class="elevator-button">Back to top</button>
  1. Initialize Elevator.js in your JavaScript:
document.addEventListener('DOMContentLoaded', function() {
  var elevator = new Elevator({
    element: document.querySelector('.elevator-button'),
    duration: 1000 // milliseconds
  });
});

This setup will create a basic "back to top" button with the default elevator experience. You can further customize the behavior and appearance by adjusting the options passed to the Elevator constructor.

Competitor Comparisons

cferdinandi logo

smooth-scroll

5,491

A lightweight script to animate scrolling to anchor links.

Pros of smooth-scroll

  • More comprehensive and feature-rich, offering various customization options
  • Actively maintained with regular updates and bug fixes
  • Supports multiple browsers and devices, including touch-enabled ones

Cons of smooth-scroll

  • Larger file size due to additional features
  • May have a steeper learning curve for beginners
  • Requires more configuration to achieve simple scrolling effects

Code Comparison

smooth-scroll:

var scroll = new SmoothScroll('a[href*="#"]', {
    speed: 500,
    speedAsDuration: true,
    easing: 'easeInOutCubic'
});

elevator.js:

var elementButton = document.querySelector('.elevator');
var elevator = new Elevator({
    element: elementButton,
    targetElement: document.querySelector('#elevator-target'),
    duration: 1000
});

Key Differences

  • smooth-scroll focuses on general smooth scrolling functionality, while elevator.js provides a unique elevator-like animation
  • smooth-scroll offers more customization options, whereas elevator.js is simpler and more specialized
  • elevator.js includes audio features for a playful user experience, which is not present in smooth-scroll

Both libraries serve different purposes and cater to different use cases. smooth-scroll is better suited for general smooth scrolling needs, while elevator.js is ideal for creating a fun, elevator-themed scrolling experience.

alvarotrigo logo

fullPage.js

35,222

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

Pros of fullPage.js

  • More comprehensive and feature-rich for creating full-screen scrolling websites
  • Supports horizontal and vertical scrolling, as well as mixed directions
  • Offers extensive customization options and callbacks for advanced implementations

Cons of fullPage.js

  • Larger file size and potentially more complex to implement for simple use cases
  • May have a steeper learning curve due to its extensive feature set
  • Requires a license for commercial use, unlike the MIT-licensed Elevator.js

Code Comparison

Elevator.js (basic usage):

var elementButton = document.querySelector('.elevator');
var elevator = new Elevator({
  element: elementButton,
  targetElement: document.querySelector('#target-element')
});

fullPage.js (basic usage):

new fullpage('#fullpage', {
  sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke'],
  anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage'],
  navigation: true
});

Summary

Elevator.js is a lightweight, focused library for smooth scrolling to the top of a page with a playful elevator-like experience. It's simple to implement and suitable for basic scroll-to-top functionality.

fullPage.js, on the other hand, is a comprehensive solution for creating full-screen scrolling websites with multiple sections and advanced features. It offers more customization options but comes with a larger footprint and potential complexity for simpler use cases.

Choose Elevator.js for a fun, lightweight scroll-to-top solution, and fullPage.js for building complex, full-screen scrolling websites with extensive customization needs.

locomotivemtl logo

locomotive-scroll

7,772

🛤 Detection of elements in viewport & smooth scrolling with parallax.

Pros of Locomotive Scroll

  • More feature-rich and customizable smooth scrolling library
  • Supports horizontal scrolling and parallax effects
  • Active development and community support

Cons of Locomotive Scroll

  • Larger file size and potentially more complex implementation
  • May have a steeper learning curve for beginners

Code Comparison

Elevator.js:

var elevator = new Elevator({
  element: document.querySelector('.elevator-button'),
  targetElement: document.querySelector('#elevator-target'),
  duration: 1000
});

Locomotive Scroll:

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  multiplier: 1,
  lerp: 0.1
});

Key Differences

Elevator.js is a lightweight library specifically designed for smooth scrolling to the top of a page, often used with a playful elevator sound effect. It's simple to implement but limited in functionality.

Locomotive Scroll, on the other hand, is a comprehensive smooth scrolling library that offers advanced features like parallax effects, horizontal scrolling, and customizable easing functions. It's more suitable for complex, modern web designs but requires more setup and configuration.

While Elevator.js focuses on a single, specific use case, Locomotive Scroll provides a broader range of scrolling animations and interactions, making it more versatile for various web projects.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

elevator.js

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!

Instructions

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!

JS

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

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

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>
// Elevator script included on the page, already.

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>
// Elevator script included on the page, already.

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>

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>
// Elevator script included on the page, already.

window.onload = function() {
  var elevator = new Elevator({
    element: document.querySelector('.elevator-button'),
    duration: 1000 // milliseconds
  });
}
</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() {
         // is called, when the elevator starts moving
       },
       endCallback: function() {
         // is called, when the elevator reached target level
       }
   });
}
</script>

NPM

The package is also available via NPM

License

Elevator.js is covered by the MIT License.

Audio in the Demo was bought via Pond5, you will need to license your own.

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