A simple back to top button using built-in BSS features

Tips and Tricks
1

I often see people looking for or asking about back-to-top buttons. I’m talking about the little button that often appears on websites either in the lower right or lower left when you scroll down the page a certain distance.

I made very simple back-to-top component that uses BSS built-in animation features, a Font Awesome 5 icon, and a bit of CSS. It’s easily customizable from within BSS since it’s just a regular link component. The distance at which it appears can be set by changing the offset value in the Animation Panel. It can be placed anywhere inside the Body, since it uses fixed positioning.

Search the online component library for Ultimate Back To Top Button.

2

I was experimenting with something similar last week using just css.

The only problem is that safari and firefox still have to catch up with animation timelines, so the fallback is that the button shows all the time.

It also uses font awesome 6 to save on loading the extra css

<a id="toTop" class="btn btn-primary" role="button" href="#" target="_top" title="Back to Top">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor">
        <!--! Font Awesome Free 6.4.2  -->
        <path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"></path>
    </svg>
</a>

#toTop {
  position: fixed;
  right: 1rem;
  bottom: -5rem;
  opacity:0;
  animation: toTop linear forwards;
  animation-timeline: view();
  animation-range-start: 90vh;
  animation-range-end: 130vh;
}

@keyframes toTop {
 to { 
     opacity: 1;
     bottom:1rem;
     }
}

https://scrolltotop.bss.design/

1 Like