Sticky Back To Top Button with Slide Effect

Back To Top Button

With Smooth Scrolling component of Oxy Ultimate add-on, we can create the sticky back-to-top button. In this tutorial I am showing you how you will add the smooth transition effect.

See the video at below about Smooth Scrolling component settings.

CSS Code

We need small custom CSS code for slide effect. Add the Code Block element in your template and enter the following CSS into the Code Block -> CSS box.


body:not(.oxygen-builder-body) .back-to-top-slide .smoothscrolling-inner-wrap.backtop {
  opacity: 1;
  visibility: visible;
  transform: translate(102%);
  transition-property: transform;
}

body:not(.oxygen-builder-body) .back-to-top-slide .smoothscrolling-inner-wrap.backtop.btn-visible {
  transform: none;
}

Now save the template and go to front-end. You will get the sticky back-to-top button with smooth transition effect after scroll.