Back to Top button

If you have pages that are long and require a lot of scrolling, you can add a Back to the top button to your theme.

The Back to Top button allows the user to smoothly scroll back to the top of the page. It’s very useful to enhance the user experience of the website. When a web page has lots of content, this page needs a navigation option that takes the user scroll to the top with a single click.

we will show you how to create a Back To Top button. This Back to Top button enhances navigation experience of your website with long pages. After the browser window has been scroll down, a button will automatically appear on the bottom-right corner of the content area. Once this button is clicked, the page will be automatically scrolling up. Through this button, the user can back to the top section from the bottom section of the web page without manual page scrolling. So, the BackToTop button makes the navigation process quicker and easier.

Create an HTML link (BackToTop button) that will take the user to the top of the webpage when clicked.

<a href="#" ms-scroll="body" class="back-to-top">
   <i class="fa fa-arrow-circle-up"></i>
</a>

The complete css code for Back to Top button.

.back-to-top {
        background: none;margin: 0; position: fixed; bottom: 10px;right: 10px;width: 50px;height: 50px;z-index: 100;text-decoration: none;color: #fff;
}
.back-to-top i {font-size: 50px;}