Alpine.js + Tailwind scroll to top snippet

snippet.html

<div x-data="{scrollBackTop: false}" x-cloak>
 	<button
		x-show="scrollBackTop"
		x-on:scroll.window="scrollBackTop = (window.pageYOffset > window.outerHeight * 0.5) ? true : false"
		x-on:click="$scroll('#top')"
		aria-label="Back to top"
		class="fixed bottom-0 right-0 p-2 mx-10 my-10 text-white bg-gray-800 hover:bg-gray-700 focus:outline-none">
			<svg viewBox="0 0 20 20" fill="currentColor" class="w-6 h-6">
				<path fill-rule="evenodd" d="M14.707 12.707A1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
			</svg>
	</button>
</div>