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

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

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:

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}