Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Elevator.js: A "Back to the Top" JS Plugin with Soothing Elevator Music

DZone's Guide to

Elevator.js: A "Back to the Top" JS Plugin with Soothing Elevator Music

· Web Dev Zone ·
Free Resource

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Elevator.js is a standalone JavaScript library by Tim Holman. The library features straightforward usage and the result is a delightful "Back to the Top" button that brings you back to the top of the page at a relaxed pace accompanied by soothing elevator Muzak and a cheerful "DING!" when you reach the top.

Check out the demo below:

Let's take a peek at the source code to see if we can figure out what makes this library tick:

//            ELEVATE!
//              /
//         ____
//       .'    '=====<0
//       |======|
//       |======|
//       [IIIIII[\--()
//       |_______|
//       C O O O D
//      C O  O  O D
//     C  O  O  O  D
//     C__O__O__O__D
//    [_____________]
    function elevate() {

        if( elevating ) {
            return;
        }

        elevating = true;
        startPosition = (document.documentElement.scrollTop || body.scrollTop);
        
        // No custom duration set, so we travel at pixels per millisecond. (0.75px per ms)
        if( !customDuration ) {
            duration = (startPosition * 1.5);
        }

        requestAnimationFrame( animateLoop );

        // Start music!
        if( mainAudio ) {
            mainAudio.play();
        }
    }

There you have it, folks.

Click the image below for more details and to use it in your site:

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}