Back to Top

The back-to-top component is a button that fades in when the user starts scrolling back up after scrolling down the page. It allows users to easily navigate back to the top of the page when interacting with it.

content

Demo

The Back to Top button appears at the bottom right corner of the screen when the user scrolls down and then starts scrolling back up, ensuring easy access to the top of the page..

back-to-top-demo 
<div id="back-top" class="back-to-top" data-tracking-id="component-back-to-top">
	<button><i class="fas fa-angle-up"></i>Top</button>	
</div>

Basic Usage

Please avoid duplicating the reference to the same CSS and JS files.

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" type="text/css" href="https://www.advantech.com/css/tuple/Back-to-Top.css">

JavaScript Instantiation

Place the following <script> near the end of your pages, right before the closing </body> tag, to enable them.

<script src="https://www.advantech.com/js/Tuple/backTop.js"></script>

content