Customizing the ToTop Button

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;
    }
  }
}