Back to Top Button

Provide an easy and smooth way for your users to return to the top of the current page. This is a great example of combining provided utilities and plugins to achieve a great effect.

Explaining the HTML

The button is constructed from an <a> element with the following parameters:

  • btn btn-primary rounded-circle classes to provide shape and color
  • btn-back-to-top class for positioning
  • data-smooth-scroll attribute to handle animating scroll to top of page
  • data-aos="fade-up" to handle hide/show of the button and provide subtle animation
  • data-aos-offset="2000" shows the button after the user scrolls 2000 pixels down the page. This works because the element is position: fixed so its original place is within the initial viewport. Setting data-aos-offset to 2000 pixels causes the button to be shown when the user scrolls 2000 pixels past the element's naturally visible location.
  • data-aos-mirror="true" and data-aos-once="false" ensures that the button will animate out again when the user scrolls back up

Inside the <a> element is an <img> with class icon bg-white for size and color. data-inject-svg allows us to color the SVG through CSS classes.

<a href="#top" class="btn btn-primary rounded-circle btn-back-to-top" data-smooth-scroll data-aos="fade-up" data-aos-offset="2000" data-aos-mirror="true" data-aos-once="false">
  <img src="assets/img/icons/interface/icon-arrow-up.svg" alt="Icon" class="icon bg-white" data-inject-svg>
</a>

Where to insert HTML

The button HTML can be placed anywhere in the <body> but it makes sense to add the code at the end of the <body>.

Setting scroll trigger

Simply adjust the data-aos-offset value to change the point at which the button is shown.