스크롤 Top 버튼 추가

src/css/main.css

@@ -2,6 +2,27 @@ body.-toc aside.toc.sidebar {
   display: none;
 }
 
+.top-scroll-btn {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 85px;
+  right: 20px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: var(--color-bwg-main);
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+}
+
+.top-scroll-btn:hover {
+  transition: transform 0.2s ease-in-out;
+  background-color: #005bb5;
+  transform: scale(1.1);
+}
+
 @media screen and (max-width: 1023.5px) {
   aside.toc.sidebar {
     display: none;

src/js/11-scroll-top.js

+/* eslint-disable no-undef */
+;(function () {
+  'use strict'
+
+  const scrollToTopButton = document.querySelector('.top-scroll-btn')
+
+  // 스크롤 이벤트 핸들러
+  window.addEventListener('scroll', function () {
+    // 페이지가 300px 이상 스크롤되었을 때 버튼 표시
+    if (window.scrollY > 300) {
+      scrollToTopButton.style.display = 'flex'
+    } else {
+      scrollToTopButton.style.display = 'none'
+    }
+  })
+
+  // 버튼 클릭 시 페이지 상단으로 스크롤
+  scrollToTopButton.addEventListener('click', function () {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    })
+  })
+})()

src/partials/main.hbs

@@ -6,6 +6,7 @@
 {{else}}
 {{> toc}}
 {{> article}}
+{{> top-scroll}}
 {{> chat}}
 {{/if}}
   </div>

src/partials/toc.hbs

 <aside class="toc sidebar" data-title="{{{or page.attributes.toctitle 'Contents'}}}" data-levels="{{{or page.attributes.toclevels 2}}}">
   <div class="toc-menu"></div>
-  {{!-- <div class="chat-btn">
-    <svg id="chat-icon" data-slot="icon" fill="#fff" stroke-width="1.5" stroke="#0072ce" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="32" height="32">
-      <path stroke-linecap="round" stroke-linejoin="round" d="M7.188 10a.312.312 0 1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.313m3.438 0a.312.312 0 1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.313m3.437 0a.312.312 0 1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.312M17.5 10c0 3.797-3.353 6.875-7.5 6.875a8.735 8.735 0 0 1-2.292-.303 5.368 5.368 0 0 1-3.639 1.576 5.364 5.364 0 0 1-.428-.059 4.025 4.025 0 0 0 .88-1.818c.081-.409-.12-.806-.422-1.098C3.273 13.484 2.5 11.825 2.5 10c0-3.797 3.353-6.875 7.5-6.875s7.5 3.078 7.5 6.875Z"></path>
-    </svg>
-  </div>
-  <div class="chat">
-    <div class="chat-head">
-      <i class="chat-logo"></i>
-      <div class="chat-logo-title-contents">
-        <span class="chat-logo-title">SWLab</span>
-        <span class="chat-logo-title sub">Bankware Global</span>
-      </div>
-      <div id="expand-btn">
-        <svg data-slot="icon" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="30" height="30">
-          <path d="m13.28 7.78 3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 0 0 1.06 1.06ZM2 17.25v-4.5a.75.75 0 0 1 1.5 0v2.69l3.22-3.22a.75.75 0 0 1 1.06 1.06L4.56 16.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.747.747 0 0 1-.75-.75ZM12.22 13.28l3.22 3.22h-2.69a.75.75 0 0 0 0 1.5h4.5a.747.747 0 0 0 .75-.75v-4.5a.75.75 0 0 0-1.5 0v2.69l-3.22-3.22a.75.75 0 1 0-1.06 1.06ZM3.5 4.56l3.22 3.22a.75.75 0 0 0 1.06-1.06L4.56 3.5h2.69a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0-.75.75v4.5a.75.75 0 0 0 1.5 0V4.56Z"></path>
-        </svg>
-      </div>
-      <div class="model">
-        <div class="backdrop"></div>
-        <button id="model-toggle">전체</button>
-        <ul id="model-popover">
-          <li>전체</li>
-          <li>BXM</li>
-          <li>BXCM</li>
-          <li>BXCP</li>
-          <li>BXI</li>
-        </ul>
-        <div class="tooltip">
-          <svg class="w-[22px] h-[22px] text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-            <path stroke="#7d7d7d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
-          </svg>
-          <span class="tooltip-text">제품 선택 시 더 정확한 매뉴얼 가이드를 제공해드립니다.</span>
-        </div>
-      </div>
-    </div>
-    <div class="chat-body"></div>
-    <form class="chat-area">
-      <textarea id="chat-input" placeholder="무엇을 도와드릴까요?"></textarea>
-      <div class="chat-btn-area">
-        <div id="send-btn" class="active">
-          <svg data-slot="icon" fill="none" stroke-width="3" stroke="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="20" height="20">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path>
-          </svg>
-        </div>
-        <div id="stop-btn">
-          <svg data-slot="icon" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="18" height="18">
-            <path clip-rule="evenodd" fill-rule="evenodd" d="M4.5 7.5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-9Z"></path>
-          </svg>
-        </div>
-      </div>
-    </form>
-  </div> --}}
 </aside>

src/partials/top-scroll.hbs

+  <div class="top-scroll-btn">
+    <svg stroke="currentColor" fill="#fff" stroke-width="0" viewBox="0 0 448 512" height="30px" width="30px" xmlns="http://www.w3.org/2000/svg">
+      <path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path>
+    </svg>
+  </div>