How to Make an Animated Back to Top Button Using Only CSS

How to Make an Animated Back to Top Button Using Only CSS,back to top button css,back to top button design,scroll to top button jquery,scroll to top button html

This "Back to top" link allows users to smoothly scroll back to the top of the page. It's a little detail which enhances navigation experience on website with long pages.

Most websites rely on JavaScript to toggle the visibility of the button based on the amount of scroll. In this post, I will show you how to create such an effect using only CSS.

Creating the structure

We inserted the "Back to top" button at the bottom of our content, before the <body> closing tag.

<div id='AT-top'>
<button aria-label='Go to Top' class='btn-top' onclick='window.scrollTo(0,0)' style='border-radius:.3rem;border:none'>
<svg class='bi bi-arrow-up-square-fill' fill='currentColor' height='2em' viewBox='0 0 16 16' width='2em' xmlns='http://www.w3.org/2000/svg'>
<path d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm3.354 8.354a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 6.207V11a.5.5 0 0 1-1 0V6.207L5.354 8.354z' fill-rule='evenodd'/>
</svg>
</button>
</div>

Adding style

The link will appear fixed on the right-side of the content.

<style>

#AT-top{color:#46aef7;position:fixed;right:2rem;bottom:2rem;background-color:#fff;border-radius:0.3rem;z-index:999}.btn-top { color: #0d6efd; border-color: #0d6efd; } .btn-top { display: inline-block; font-weight: 400; line-height: 1.5; color: #4a4a4a; text-align: center; vertical-align: middle; cursor: pointer; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out; }.btn-top { padding: 0!important; }html{scroll-behavior: smooth;}

</style>