Scroll down to see the magic!

This component uses a scroll event listener to track the user's scroll position and determine when to show the button. The button itself is styled as a circular icon with a progress indicator around it that fills up as the user scrolls down. When clicked, it smoothly scrolls the user back to the top of the page. The progress indicator is implemented using an SVG circle with a stroke dash offset that updates based on the scroll progress. you can swap the 'fixed' position with absolute-relative combo if you want the button to be positioned relative to a specific container instead of the viewport. The component is designed to be responsive and works well on both desktop and mobile devices. It is direction aware, such that when you go down, it shows chevronUp and while going up it shows arrowDown icon, while at default top and bottom positions, it shows chevronUp and arrowDown respectively.