Avada includes the ability to show a To the Top icon when a user scrolls down and it can be placed on the left or the right and appear to be floating. This is great for a lot of use cases, but maybe you want something different — I know I did.
The default settings are inconveniently located in two locations:
- Layout option are located in Global Options > Extras > Miscellaneuos
- The on and off and desktop and mobile or both script options are in Global Options > Advanced > Features
The easiest way to find them is just to type ToTop in the search bar.

Changing the appearance
In the case of this site, I wanted to incorporate several changes:
- Change the appearance
- Center it ion the bottom
- Add text
Fortunately, all of these can be done with some custom CSS.
Changing the color
In order to change the color, the code is fairly straightforward. The ToTop is the ID associated with the button and you just need to apply the colors for the various states (normal, hover, active, and focus).
#toTop {
background-color: #ffd43b;
width: auto;
padding: 8px;
color: #1b1b1b;
}
#toTop:hover {
background-color: #75bffc !important;
color: #1b1b1b !important;
}
#toTop:active, #toTop:focus {
outline: 1px;
background-color: #E4E8FB !important;
color: #1b1b1b;
}
Changing the position
Next, I wanted to center it on the bottom. I played around with this and could never get it to work just right. Since the positioning was either left or right and I had to pick one and then set it from there. I left it at the default”right” position. I found that setting the width of the button and then positioning at 50% of the viewport minus 50% of the width did the trick.
.to-top-right #toTop {
right: calc(50vw - 65px);
width: 130px;
bottom: 0px;
height: 40px;
border-radius: 6px 6px 0 0 !important;
}
Adding text
Lastly, I wanted to add text and a custom icon. Since I am already using Font Awesome as an icon font, this was fairly easy to implement.
#toTop:after {
line-height: 1.5;
font-family: Poppins;
font-weight:500;
content: "To the Top";
font-size: 14px;
color: #1b1b1b;
}
#toTop:before {
color: #1b1b1b;
font-family: "Font Awesome 6 Pro" !important;
font-weight: 500;
content: "\f35b" !important;
line-height: 1.5;
font-size: 16px;
}
While this is all fine and good, I did experience a few issues on mobile and decided to allow the default styling to be used there. That may change in the future.
All together now
The SCSS to make it happen.
/*to top button */
@media only screen and (min-width: 600px) {
#toTop {
&:after {
line-height: 1.5;
font-family: Poppins;
font-weight: 500;
content: "To the Top";
font-size: 14px;
color: #1b1b1b;
}
&:before {
color: #1b1b1b;
font-family: "Font Awesome 6 Pro" !important;
font-weight: 500;
content: "\f35b" !important;
line-height: 1.5;
font-size: 16px;
}
&.fusion-to-top-active {
pointer-events: auto;
opacity: 0.95;
transition: opacity 0.4s ease-in-out, background 0.2s ease-in-out;
}
}
.to-top-right #toTop {
right: calc(50vw - 65px);
width: 130px;
bottom: 0px;
height: 40px;
border-radius: 6px 6px 0 0 !important;
}
#toTop {
background-color: #ffd43b;
width: auto;
padding: 8px;
color: #1b1b1b;
&:hover {
background-color: #75bffc !important;
color: #1b1b1b !important;
}
&:active, &:focus {
outline: 1px;
background-color: #E4E8FB !important;
color: #1b1b1b;
}
}
}
Originally published on Dec. 26, 2021