Merge pull request #177 from agileware-jp/back-to-top-button

トップへ戻るボタンの実装

src/js/backToTop.js

@@ -0,0 +1,38 @@
+/**
+ * スクロールでトップへ戻る
+ */
+let backToTopBtn = null
+
+function backToTop(speed) {
+  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+  if (scrollTop > 0) {
+      window.requestAnimationFrame(() => backToTop(speed));
+      window.scrollTo(0, scrollTop - scrollTop / speed);
+  }
+}
+
+export function createBackToTopBtn() {
+  if(!backToTopBtn) {
+    backToTopBtn = document.createElement('button')
+    backToTopBtn.classList.add('aw_backToTop')
+    backToTopBtn.textContent = 'トップへ戻る'
+    backToTopBtn.style.display = 'none'
+
+    backToTopBtn.addEventListener('click', () => backToTop(2))
+
+    document.body.appendChild(backToTopBtn)
+  }
+}
+
+// 一定量スクロールされた場合のみボタンを表示したい
+export function toggleBackToTopBtn() {
+  if(!backToTopBtn) return
+  const SCROLL_THRESHOLD = 150
+
+  const scrollPosition = document.documentElement.scrollTop
+  if(scrollPosition > SCROLL_THRESHOLD) {
+    backToTopBtn.style.display = 'block'
+  } else {
+    backToTopBtn.style.display = 'none'
+  }
+}

src/js/index.js

@@ -2,6 +2,7 @@ import { addDefaultTopMenStyle, initToggleTopMenu } from './topMenu'
 import { addNoScrollClass, saveMainMenuScrollPosition, restoreMainMenuScrollPosition, dragScroll } from './mainMenu'
 import { addDefaultSidebarStyle, initToggleSidebar } from './sidebar'
 import { waitForBilling, checkTrial, copyBillingContainer } from './billing'
+import { createBackToTopBtn, toggleBackToTopBtn } from './backToTop'
 
 /* ちらつき防止のため、topMenuの初期スタイルを追加する */
 addDefaultTopMenStyle()
@@ -59,7 +60,9 @@ window.addEventListener('load', restoreMainMenuScrollPosition);
 /**
  * その他一般的な処理
  */
+window.addEventListener('scroll', toggleBackToTopBtn)
 window.addEventListener('DOMContentLoaded', () => {
+  createBackToTopBtn()
   hiddenTabsButtons()
   addFeedbackLink()
 

src/sass/components/buttons.scss

@@ -55,6 +55,13 @@
     @apply mt-2
   }
 
+  // topへ戻るボタン（LIFよりは下に配置するためのz-index指定）
+  .aw_backToTop {
+    // @extend .BTN_PRIMARY;
+    background-image: url(images/arrow_upward_onFill.svg);
+    @apply cursor-pointer inline-block overflow-hidden indent-[100%] whitespace-nowrap w-8 h-8 bg-center align-middle bg-background-dark/80 bg-no-repeat border-none p-0 rounded-md fixed right-4 bottom-4 z-[499] hover:bg-background-dark/70 shadow-md
+  }
+
   // Sidebarの開閉ボタン
   .aw_toggleSidebar {
     @extend .BTN_TERTIARY_ICON_ONLY_OUTLINED;