1
2 <div onclick="scrollToTop();" class="fixed scrollToTop mr-12 bottom-0 right-0 z-10 flex items-end justify-end mb-4 ">
3 <a target="_blank"
4 class=" block w-16 h-16 transition-all transform duration-700 ease-in-out rounded-full shadow hover:shadow-lg hover:scale-150 hover:rotate-360 ">
5 <svg class="bg-white rounded-full shadow-2xl " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
6 fill="currentColor">
7 <path fill-rule="evenodd"
8 d="M4.293 15.707a1 1 0 010-1.414l5-5a1 1 0 011.414 0l5 5a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414 0zm0-6a1 1 0 010-1.414l5-5a1 1 0 011.414 0l5 5a1 1 0 01-1.414 1.414L10 5.414 5.707 9.707a1 1 0 01-1.414 0z"
9 clip-rule="evenodd" />
10 </svg>
11 </a>
12 </div>
13 <script>
14 document.querySelector('.scrollToTop').style.visibility = 'hidden';
15
16 window.addEventListener("scroll", function(){
17 scroll=window.scrollY;
18 if (scroll>20) {
19 document.querySelector('.scrollToTop').style.visibility = 'visible';
20 } else {
21 document.querySelector('.scrollToTop').style.visibility = 'hidden';
22 }
23 });
24
25 function scrollToTop() {
26 var scrollToTop = window.setInterval(function() {
27 var pos = window.pageYOffset;
28 if (pos > 0) {
29 window.scrollTo(0, pos - 20); // how far to scroll on each step
30 } else {
31 window.clearInterval(scrollToTop);
32 }
33 }, 16);
34 }
35 </script>