floating buttonを実装

LuckyCatInc · Sep 9, 2024 · e6fac8b · e6fac8b
1 parent f61c4ea
commit e6fac8b
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 1 deletion.
diff --git a/docs/css/style.css b/docs/css/style.css
@@ -20,4 +20,16 @@ nav {
 .swiper {
     width: 50vw;
     height: 40vh;
+}
+
+#back-to-top {
+    display: none; /* ページ表示開始時はボタンは非表示 */
+    position: fixed;
+    bottom: 4vh;
+    right: 1vw;
+    z-index: 9999;
+    border-radius: 50%;
+    width: 3rem;
+    height: 3rem;
+    background-color: #555;
 }
diff --git a/docs/index.html b/docs/index.html
@@ -131,11 +131,19 @@ <h1 id="お知らせ">お知らせ</h1>
                 <li><a href="#About">About</a></li>
                 <li><a href="#サービス紹介">サービス紹介</a></li>
                 <li><a href="#お知らせ">お知らせ</a></li>
-                <li><button data-tooltip="Top">Top</button></li>
+            </ul>
+            <ul>
+                <!-- dummy -->
             </ul>
         </nav>
     </footer>
 
+    <a href="#" id="back-to-top">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="3rem" height="3rem" fill="white">
+            <path d="M12 4l-8 8h6v8h4v-8h6l-8-8z" />
+        </svg>
+    </a>
+
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="./js/script.js"></script>
 </body>

diff --git a/docs/js/script.js b/docs/js/script.js
@@ -18,4 +18,14 @@ const swiper = new Swiper('.swiper', {
     scrollbar: {
         el: '.swiper-scrollbar',
     },
+});
+
+const backToTopButton = document.getElementById('back-to-top');
+
+window.addEventListener('scroll', () => {
+    if (window.scrollY > 100) {
+        backToTopButton.style.display = 'block';
+    } else {
+        backToTopButton.style.display = 'none';
+    }
 });