From 4c54aee2fe90902a1655d36135016cf60b8c760f Mon Sep 17 00:00:00 2001
From: Vasilii Mikhailovskii <ti.webdev@ya.ru>
Date: Thu, 15 May 2025 14:23:11 +0200
Subject: [PATCH] add scroll down button

---
 apps/frontend/src/layouts/LayoutWithTabs.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/layouts/LayoutWithTabs.vue b/apps/frontend/src/layouts/LayoutWithTabs.vue
index 53b66aa..2f2fdd3 100644
--- a/apps/frontend/src/layouts/LayoutWithTabs.vue
+++ b/apps/frontend/src/layouts/LayoutWithTabs.vue
@@ -16,6 +16,7 @@
       <div class="sm:max-w-prose grid grid-cols-1 mx-auto my-5 w-full">
         <div ref="isTopOfContentRef" />
         <slot name="default" v-bind:scrollToBottom />
+
         <div ref="isBottomOfContentRef" />
       </div>
     </div>
@@ -26,6 +27,17 @@
       :class="{ 'opacity-100': !isBottomOfContentVisible }"
     />
 
+    <!-- Scroll to bottom -->
+    <Button
+      icon="pi pi-arrow-down"
+      rounded
+      variant="outlined"
+      severity="secondary"
+      class="transition-opacity opacity-0 row-start-3 row-span-1 col-start-1 sm:row-start-4 relative self-end mb-4 bg-red-900 place-self-center"
+      @click="scrollToBottom"
+      :class="{ 'opacity-100': !isBottomOfContentVisible }"
+    />
+
     <!-- Footer Section -->
     <div class="row-start-4 row-span-1 col-start-1 sm:row-start-5">
       <slot name="footer">
@@ -75,7 +87,10 @@ isBottomOfContentVisible.value = true
 
 const scrollToBottom = () => {
   if (contentScrollContainerRef.value) {
-    contentScrollContainerRef.value.scrollTop = contentScrollContainerRef.value.scrollHeight
+    contentScrollContainerRef.value.scrollTo({
+      top: contentScrollContainerRef.value.scrollHeight,
+      behavior: 'smooth',
+    })
   }
 }