맨위로 가는 버튼

public/css/custom.css

@@ -432,4 +432,29 @@ cursor: not-allowed !important;
   overflow-y: auto;
   scrollbar-width: none; 
 }
-/* commuters project list end */
+/* commuters project list end */
+
+/* Scroll Button */
+
+.scroll-top-btn {
+  bottom: 20px;
+  right: 20px;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(10px);
+  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
+}
+
+.scroll-top-btn.visible {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.scroll-top-btn.hidden {
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(10px);
+}
+
+/* Scroll Button end */

src/components/button/ScrollTopButton.vue

@@ -0,0 +1,32 @@
+<template>
+    <button
+        @click="scrollToTop"
+        class="scroll-top-btn rounded-pill btn-icon btn-primary position-fixed shadow z-5 border-0"
+        :class="{ 'visible': showButton, 'hidden': !showButton }"
+    >
+        <i class='bx bx-chevron-up'></i>
+    </button>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+
+const showButton = ref(false);
+
+const handleScroll = () => {
+    showButton.value = window.scrollY > 200;
+};
+
+const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+};
+
+onMounted(() => {
+    window.addEventListener("scroll", handleScroll);
+});
+
+onUnmounted(() => {
+    window.removeEventListener("scroll", handleScroll);
+});
+</script>
+

src/layouts/NormalLayout.vue

@@ -23,6 +23,8 @@
 
         <!-- Drag Target Area To SlideIn Menu On Small Screens -->
         <div class="drag-target"></div>
+
+        <ScrollTopButton />
     </div>
 </template>
 <script setup>
@@ -32,6 +34,7 @@
     import TheChat from './TheChat.vue';
     import { nextTick } from 'vue';
     import { wait } from '@/common/utils';
+    import ScrollTopButton from '@c/button/ScrollTopButton.vue';
 
     window.isDarkStyle = window.Helpers.isDarkStyle();
 

src/layouts/TheChat.vue

@@ -37,7 +37,7 @@ const sendMessage = () => {
     box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
-    z-index: 1000;
+    z-index: 4;
 }
 
 </style>