Elevator

A back-to-top button that takes its time, with music.

What the elevator extension is for, how to install it, and the smallest shortcode that produces a working button.
Author

Mickaël CANOUIL, Ph.D.

A back-to-top link is a solved problem, and a dull one. Elevator.js solves it differently: the page rides back up at a leisurely pace while elevator music plays, and dings when it arrives.

elevator wires that into Quarto as a shortcode. One line gives you the button, the script, and the bundled arrival sound.

Installation

quarto add mcanouil/quarto-elevator@1.5.1

This will install the extension under the _extensions subdirectory. If you are using version control, you will want to check in this directory.

Or install it from your editor with Quarto Wizard:

Visual Studio Code Positron VSCodium

Quick start

{{< elevator >}}

That is the whole thing: a button labelled “Return to the top!” that rides the page up and dings on arrival.

Give it your own label, and a target to stop at:

{{< elevator "Back to the header" my-header >}}

Add the music, which is the point:

{{< elevator audio=music.mp3 volume=0.4 >}}

See the Reference for every option, and the Examples for a button you can ride.

Where it works

HTML formats that carry JavaScript, which covers html and revealjs.

Note

In every other format the shortcode renders nothing, which is the right outcome: a scroll button means nothing in a PDF.

Back to top