[2단계 - 상세 정보 & UI/UX 개선하기] 초코(강다빈) 미션 제출합니다.

index.html

@@ -20,6 +20,7 @@ <h1>
           <h2></h2>
           <ul class="item-list"></ul>
         </section>
+        <button id="goToTop" class="text-detail-contents">TOP</button>
       </main>
     </div>
   </body>

src/App.ts

@@ -29,6 +29,7 @@ export default class App {
     this.#addHomeButtonEvent();
     this.#initEventListeners();
     this.#setupIntersectionObserver();
+    this.#goToTop();
   }
 
   #insertLogo() {
@@ -259,4 +260,14 @@ export default class App {
       modal.openModal();
     }
   }
+
+  #goToTop() {
+    const topButton = document.querySelector('#goToTop');
+
+    if (topButton) {
+      topButton.addEventListener('click', () => {
+        window.scrollTo(0, 0);
+      });
+    }
+  }
 }

src/css/common.css

@@ -319,3 +319,22 @@ header .search-box > .search-button {
     width: 150px;
   }
 }
+
+#goToTop {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  text-align: center;
+
+  width: 50px;
+  height: 50px;
+  border: none;
+  border-radius: 25px;
+
+  background-color: var(--red);
+}
+
+#goToTop:hover {
+  box-shadow: 0px 0px 8px 4px rgba(255, 255, 255, 0.4);
+  cursor: pointer;
+}