tholman/elevator.js

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

🚨🚨🚨 Best Friend Alert 🚨🚨🚨

Hi there, I'm Tim Holman, a creative developer who loves to dabble in the weird and wonderful... Especially the weird.

🔥 If you like my stuff, please consider sponsoring me 🔥🔥

Some of my many open source projects are:

• 🐶 The LONG DOGE CHALLENGE a very long and difficult goal based game.
• 🐁 These 90's cursor effects, that will work on all modern browsers and phones, reviving that fun old internet feel!
• 🐙 These cute fork me on GitHub corners, that sit on the corner of your web page and wave to visitors.
• 🚠 Elevator.JS a JavaScript library to bring elevator music to you "back to top" buttons.
• 🔥 The Indie Web my personal internet hype blog, covering cool code and web exeriences.
• 🎨 Generative Artistry a tutorial system (and podcast!) about generative art.
• 🦟 Mosquito JS, a JS library that creates annoying mosquitos.
• 🥔 And lots more!

elevator.js's Issues

Chrome Extension

Open to a chrome extension? GF just said she would love to use this when looking online for clothes lol.

Sound

Hey, my friend i was searching some libs on cdnjs then i saw elevator.js so when i goto example and clicked on back to top suddenly music started and i was putted earphones and my earphones are very loud i got feeling like heart attacked

Example page is not long enough

As the title say, I'd like the example page to be even longer! There isn't enough time to fully embrace the awesomeness which is elevator.js.

Please, link a demo!

Elevator Music no longer under CC License.

The elevator music is no longer royalty free.

No Git tags in GitHub repo

Hey @tholman,

I'd like to host your library, elevator.js on cdnjs — It is one of the most famous free and public web front-end CDN services which is used by ~1,143,000 websites worldwide.

The git auto-updater for cdnjs relies on git tags to recognize a release version and automatically update the library in the cdnjs repo.

If it's not too much to ask, can you please add git tags for this repo, say 1.0.0?

Note: Even though this package is available on npm and I'll be using npm for the auto-update code, I'm suggesting the addition of release tags as a fail safe method.

Needs easing

A real elevator is slow to start and finish for comfort, but fast in the middle. You should add some easing :)

add package.json

would you please consider adding package.json so that we can add your lib on https://cdnjs.com with git auto-update.
thank you very much!
cdnjs/cdnjs#5529

The demo works poorly on android using Chrome

Music is too loud

Really.

Don't elevators go down, too?

I understand the principal point behind a scroll-to-top mini-library... but it seems (on the thought level) that it would be trivial to implement scroll-to-bottom functionality! I prefer the stairs, but If I use an elevator, I probably use it both ways.

Can't have just one audio

I wanted endAudio but when I use just endAudio it produces a javascript error assuming I also want a mainAudio. I currently have mainAudio set to empty string but allowing just one would be better I think. Thanks.

Tabbing issue #2

If you click "scroll to top" but then tab out while the music is playing, the music will keep playing despite the page having reached the top. Then when you switch back to the page, it will abruptly stop with a "ding", but youll still be at the bottom (of the page).

Chromebook installation

How does one go about installing this on a Chromebook? Will there be a easy-to-use browser extension available?

Play the music while scrolling up using the mouse wheel

Of course, this should be optional.

Strange behavior when coupled with the Home button

Hey Tim,

I've been looking into using your library on a site that I'm setting up, and in doing research on the problem, I came across several suggestions of using the Home button on the keyboard in conjunction with this library. After setting up a test page, I tried using the Home button, and it bypassed the normal behavior and simply moved to the top of the page immediately. Do you have any suggestions as to how I could suppress this behavior? Perhaps some options in the library to intercept the Home button and use it to trigger the elevator behavior? I feel that this library would give my site the responsiveness and interactivity that it needs to really stand out.

Thanks in advance,

• Shotgun Ninja

Music stops when switching tabs.

I don't think it's a good idea to stop the music suddenly, maybe a smooth fade out will make the scrolling sounds better XD

Claim a js.org DNS record.

E.g., redux.js.org. elevator.js.org is still available.

Details at dns.js.org.

Setting volume

Hey is there any way to set the volume of the mp3?

I tried reducing it's volume, but it doesn't seem to work in my Opera.

Kind Regards,
Dennis Bitsch

Do not bind event to element if browser does not meet the requirements

In method init, binding click event to element should be done after checking if browser meets requirements.

add tags for each version

would you please consider adding tags for each version so that we can add your lib on https://cdnjs.com with git auto-update.
thank you very much!
cdnjs/cdnjs#5529

.back-to-top class is hidden by the ad-blocker

I've noticed that the nice "go to top" button has been hidden by the adblocker because of 'back-to-top' class it has. Can this class name be changed to something more ad-blocker friendly?

Scrolling within a element?

Hi loved the plugin, since i am a beginner in javascript, i was trying to attach the plugin to a element within the page that has overflow scroll. (long content div && body height 100%). I was wondering how do i about doing that?

Breaks on IE8 due to lack of Audio API support

Elevator breaks on IE8 and I'm blessed to work on a product that still supports it.

Will PR a fix today (basically checking for the lack of it and return afterwards).

Shouldn't allow you to interact with the page again until the doors finishing opening

Unless this is an open-door elevator, when it reaches the top you should not be able to interact with the page again until the doors have opened.

Missin extra sounds

I'm missing the extra ding sound when you reach the top!

Adding stops along the way

Per a comment from HN, I love the idea of adding stops along the way.

Progressive enhancement

Why not use the 'old fashioned way' of providing a link with a #top anchor?
That way, this at least degrades nicely for those not inclined to use JS.
As #top is a specialcase anchor, you wont need to name/id the body to make this work.

Doesn't allow multiple variations of elevator options on a single page

I'd fix this if I weren't on mobile, but basically - because the configuration options are not instance variables, whatever "Elevator" that is created last overrides the configuration options for all previous Elevators. For example, by doing the following:

        var elevator1 = new Elevator({
            element: $('#button-one'),
            mainAudio: './music/elevator-music-one.mp3', // Music from http://www.bensound.com/
            endAudio:  './music/ding-one.mp3',
            duration: 1000
        });

        var elevator2 = new Elevator({
            element: $('#button-two'),
            mainAudio: './music/elevator-music-two.mp3', // Music from http://www.bensound.com/
            endAudio:  './music/ding-two.mp3',
            duration: 5000
        });

elevator will have the configuration of elevator2 even though I really wanted two different behaviors.

Thanks for making this, I had a good laugh. :)

Update demo page to include new GitHub Corners

I love the new github-corners project you created. The demo page for elevator.js could use it! http://tholman.com/elevator.js/

Don't ignore user scroll

If the user clicks the trigger to scroll up, but during the upscroll desides that he wants to scroll in another direction / stop the scroll, the user should be able to do so by scrolling. elevator.js should then stop the scrolling.

Is it possible to add test to this sweetie?

🍻

Support reduced-motion animations

First response: this is awesome! Until I get dizzy, a mild headache, and feel like I might barf 🤮

It would be rad if there was a reduced-motion animation (maybe jump points with subtle fades/wiggles?), that automatically kicked in on matchMedia('(prefers-reduced-motion)')

Problem when browser lost focus

Hello
When click back to top and then lost focus from browser, elevator goes to first of page and music stopped. Can anybody fix that?

No "ding" in Mobile Safari

Hey, I know this is mostly a gag so you might not care, but you don't get the "ding" in Mobile Safari. My guess is that it's the fact that iOS requires user intervention to play audio on websites? I'm not sure if there's a way around it.

Cool

Cool, but I find the demo on the homepage awkwardly slow.

Module is not defined

Uncaught ReferenceError: module is not defined
at elevator.js:265
(anonymous) @ elevator.js:265

Ding

I feel like the elevator needs to ding at the top. Otherwise, how does the user know when to get off? Lovely product otherwise!

Music license?

Is the music licensed as MIT too? Given that it is included in this repo I assume it is, but it would help if that was clarified.

Random Selection from Multiple Audio Tracks

You should be able to supply multiple tracks as arguments and have it select one randomly.

Absolutely trash

No "close door" button

I'd really like to use this library, but without a force close door button I'm afraid it has no place in our application.

Audible signals are not ADA compliant

Summary: An elevator car arriving at its topmost floor will always be traveling next to a lower floor. Therefore upon arrival, the elevator car should always signal with two alerts or announcement including the word "down".

Developers needing to meet Section 508 compliance standards are unable to use elevator.js in its present form.

US ADA guidelines for elevators require audible signals at each individual entrance; typically these signals are installed withinin the light assembly for each car. Please see the relevant ADA guidelines below.

https://www.ada-compliance.com/ada-compliance/ada-elevators.html
4.10.4 Hall Lanterns. A visible and audible signal shall be provided at each hoistway entrance to indicate which car is answering a call. Audible signals shall sound once for the up direction and twice for the down direction or shall have verbal annunciators that say "up" or "down."

Though I have focused on US-centric guidelines; there is a high degree of similarity worldwide among accessibility standards.

Also if I might make a personal request; and this is just my opinion -- I find the music to be a little bit too loud for an elevator.

If you are amenable to this change, I would be happy to submit a PR.

bower and npm?

Tabbing away breaks

1. Go http://tholman.com/elevator.js/
2. Scroll down.
3. Click Back to Top. Music plays.
4. Open new tab and go to your favorite site that's SFW.
5. Music still plays on the other tab.
6. Yea feels so good~
7. Come back to elevator page.
8. Ding!
9. But still at the bottom.

"Ding" sound is not working no iPad

The animation and the music are fine but the ding sound in the end it's not playing.

Volume settings

Can you add an opportunity to tune the volume cause if a user has high volume settings it can really bother.. Thanks

Best project 2020

Hello,

I just want to point out that this is to me the best project I've seen during 2020 so far. Keep on rockin'!

speed instead of duration?

Is there a way to set the scrolling-speed, independently from the scrolling-distance? With a fix duration the scrolling-speed is very different at long and short sites.

show and hide element

Hi!
It's amasing stuff! Really. But I need some your help.
How I can hide the button with elevator when it's top of page? I mean, when is top of page I need to hide elevator button, else show it.