To top button
The Look
Add a “Back to Top” button that flows seamlessly with the Fixed Bottom Nav Bar for longer forms, in case people want an easy/fast way to start from the beginning.
The HTML
This is your HTML. Drag a ‘Code Block’ onto the top of your Dubsado form, then copy and paste the following code into the block.
<div id="to-top" </div>
<span onclick="javascript:document.getElementById('to-top').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'nearest'
});
" class="back-to-top">➤</span>
The CSS
This is your CSS. Copy and paste the following code—in the same block—beneath the HTML code that you just pasted from above.
<style>
/* TO TOP BUTTON STYLE 1 */
.back-to-top {
width: 44px;
line-height: 44px;
overflow: hidden;
z-index: 999;
cursor: pointer;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
position: fixed;
bottom: 0;
right: 0;
background-color: #242424; /* Choose your brand’s secondary color */
color: #fff;
text-align: center;
font-size: 30px;
text-decoration: none;
}
.back-to-top:hover {
background-color: #cfab79; /* Choose your brand’s primary color */
color: #fff;
}
/* END TO TOP BUTTON STYLE 1 */
</style>
To update your colors, find anywhere you see background-color: and update the HEX number to add elements of your own visual branding.
The Notes
Please note the following:
You’ll notice that the smooth scroll—after the ‘To Top Button’ is clicked—only works in some browsers. If you’re using a browser that doesn’t support smooth scrolling with the code provided, the button will still work. The only difference is there will be a jump to the top rather than a smooth scroll.