# 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.