Sometimes we all need a little inspiration to get started on the right path. This Elevator Style Guide provides basic examples to start customizing your Elevator ‘Back to Top’ button.
FIXED POSITION
If you wish to style your ‘Back to Top’ button so it sticks to the same position within the browser window, use position: fixed;
to do so.
Fixed Left
#elevator {
position: fixed;
bottom: 0;
left: 20px;
}
Code language: CSS (css)
Fixed Right
#elevator {
position: fixed;
bottom: 0;
right: 20px;
}
Code language: CSS (css)
RELATIVE POSITION
Alternatively, the Back to Top text can remain at the end of the page, but aligned left or right to better suit your site’s design.
Relative Left
#elevator.elevator-container {
text-align: left;
}
Code language: CSS (css)
Relative Right
#elevator.elevator-container {
text-align: right;
}
Code language: CSS (css)