From 410c185bd3f50c2eb587741d2255ebc71b2c8c2c Mon Sep 17 00:00:00 2001 From: morioka-hibiki Date: Fri, 16 Aug 2024 15:55:21 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=E3=83=88=E3=83=83=E3=83=97=E3=81=B8?= =?UTF-8?q?=E6=88=BB=E3=82=8B=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE=E5=AE=9F?= =?UTF-8?q?=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/index.js | 3 +++ src/js/scrollToTop.js | 37 ++++++++++++++++++++++++++++++++ src/sass/components/buttons.scss | 7 ++++++ 3 files changed, 47 insertions(+) create mode 100644 src/js/scrollToTop.js diff --git a/src/js/index.js b/src/js/index.js index 7f80f2b..1960891 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -2,6 +2,7 @@ import { addDefaultTopMenStyle, initToggleTopMenu } from './topMenu' import { addNoScrollClass, saveMainMenuScrollPosition, restoreMainMenuScrollPosition } from './mainMenu' import { addDefaultSidebarStyle, initToggleSidebar } from './sidebar' import { waitForBilling, checkTrial, copyBillingContainer } from './billing' +import { createScrollToTopBtn, toggleBackToTopBtn } from './scrollToTop' /* ちらつき防止のため、topMenuの初期スタイルを追加する */ addDefaultTopMenStyle() @@ -59,7 +60,9 @@ window.addEventListener('load', restoreMainMenuScrollPosition); /** * その他一般的な処理 */ +window.addEventListener('scroll', toggleBackToTopBtn) window.addEventListener('DOMContentLoaded', () => { + createScrollToTopBtn() hiddenTabsButtons() addFeedbackLink() diff --git a/src/js/scrollToTop.js b/src/js/scrollToTop.js new file mode 100644 index 0000000..45ae721 --- /dev/null +++ b/src/js/scrollToTop.js @@ -0,0 +1,37 @@ +/** + * スクロールでトップへ戻る + */ +let scrollToTopBtn = null + +function scrollToTop() { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }) +} + +export function createScrollToTopBtn() { + if(!scrollToTopBtn) { + scrollToTopBtn = document.createElement('button') + scrollToTopBtn.classList.add('aw_scrollToTop') + scrollToTopBtn.textContent = 'トップへ戻る' + scrollToTopBtn.style.display = 'none' + + scrollToTopBtn.addEventListener('click', scrollToTop) + + document.body.appendChild(scrollToTopBtn) + } +} + +// 一定量スクロールされた場合のみボタンを表示したい +export function toggleBackToTopBtn() { + if(!scrollToTopBtn) return + const SCROLL_THRESHOLD = 150 + + const scrollPosition = document.documentElement.scrollTop + if(scrollPosition > SCROLL_THRESHOLD) { + scrollToTopBtn.style.display = 'block' + } else { + scrollToTopBtn.style.display = 'none' + } +} diff --git a/src/sass/components/buttons.scss b/src/sass/components/buttons.scss index 0c6ed62..54e7a13 100644 --- a/src/sass/components/buttons.scss +++ b/src/sass/components/buttons.scss @@ -55,6 +55,13 @@ @apply mt-2 } + // topへ戻るボタン（LIFよりは下に配置するためのz-index指定） + .aw_scrollToTop { + @extend .BTN_TERTIARY_ICON_ONLY_OUTLINED; + background-image: url(images/expand_less_dark.svg); + @apply fixed right-4 bottom-4 z-[499] + } + // Sidebarの開閉ボタン .aw_toggleSidebar { @extend .BTN_TERTIARY_ICON_ONLY_OUTLINED; From 9981723c7aecad2194a520616bc6339177edcd59 Mon Sep 17 00:00:00 2001 From: morioka-hibiki Date: Tue, 20 Aug 2024 13:10:26 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=E5=90=8D=E5=89=8D=E3=82=92=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/backToTop.js | 37 ++++++++++++++++++++++++++++++++ src/js/index.js | 4 ++-- src/js/scrollToTop.js | 37 -------------------------------- src/sass/components/buttons.scss | 2 +- 4 files changed, 40 insertions(+), 40 deletions(-) create mode 100644 src/js/backToTop.js delete mode 100644 src/js/scrollToTop.js diff --git a/src/js/backToTop.js b/src/js/backToTop.js new file mode 100644 index 0000000..9a19c07 --- /dev/null +++ b/src/js/backToTop.js @@ -0,0 +1,37 @@ +/** + * スクロールでトップへ戻る + */ +let backToTopBtn = null + +function backToTop() { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }) +} + +export function createBackToTopBtn() { + if(!backToTopBtn) { + backToTopBtn = document.createElement('button') + backToTopBtn.classList.add('aw_scrollToTop') + backToTopBtn.textContent = 'トップへ戻る' + backToTopBtn.style.display = 'none' + + backToTopBtn.addEventListener('click', backToTop) + + 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' + } +} diff --git a/src/js/index.js b/src/js/index.js index 1960891..53e672d 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -2,7 +2,7 @@ import { addDefaultTopMenStyle, initToggleTopMenu } from './topMenu' import { addNoScrollClass, saveMainMenuScrollPosition, restoreMainMenuScrollPosition } from './mainMenu' import { addDefaultSidebarStyle, initToggleSidebar } from './sidebar' import { waitForBilling, checkTrial, copyBillingContainer } from './billing' -import { createScrollToTopBtn, toggleBackToTopBtn } from './scrollToTop' +import { createBckToTopBtn, toggleBackToTopBtn } from './backToTop' /* ちらつき防止のため、topMenuの初期スタイルを追加する */ addDefaultTopMenStyle() @@ -62,7 +62,7 @@ window.addEventListener('load', restoreMainMenuScrollPosition); */ window.addEventListener('scroll', toggleBackToTopBtn) window.addEventListener('DOMContentLoaded', () => { - createScrollToTopBtn() + createBckToTopBtn() hiddenTabsButtons() addFeedbackLink() diff --git a/src/js/scrollToTop.js b/src/js/scrollToTop.js deleted file mode 100644 index 45ae721..0000000 --- a/src/js/scrollToTop.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * スクロールでトップへ戻る - */ -let scrollToTopBtn = null - -function scrollToTop() { - window.scrollTo({ - top: 0, - behavior: 'smooth' - }) -} - -export function createScrollToTopBtn() { - if(!scrollToTopBtn) { - scrollToTopBtn = document.createElement('button') - scrollToTopBtn.classList.add('aw_scrollToTop') - scrollToTopBtn.textContent = 'トップへ戻る' - scrollToTopBtn.style.display = 'none' - - scrollToTopBtn.addEventListener('click', scrollToTop) - - document.body.appendChild(scrollToTopBtn) - } -} - -// 一定量スクロールされた場合のみボタンを表示したい -export function toggleBackToTopBtn() { - if(!scrollToTopBtn) return - const SCROLL_THRESHOLD = 150 - - const scrollPosition = document.documentElement.scrollTop - if(scrollPosition > SCROLL_THRESHOLD) { - scrollToTopBtn.style.display = 'block' - } else { - scrollToTopBtn.style.display = 'none' - } -} diff --git a/src/sass/components/buttons.scss b/src/sass/components/buttons.scss index 54e7a13..b85152d 100644 --- a/src/sass/components/buttons.scss +++ b/src/sass/components/buttons.scss @@ -56,7 +56,7 @@ } // topへ戻るボタン（LIFよりは下に配置するためのz-index指定） - .aw_scrollToTop { + .aw_backToTop { @extend .BTN_TERTIARY_ICON_ONLY_OUTLINED; background-image: url(images/expand_less_dark.svg); @apply fixed right-4 bottom-4 z-[499] From 7d7a2702a9feb6355a878d93ecbe690683ca0e15 Mon Sep 17 00:00:00 2001 From: morioka-hibiki Date: Tue, 20 Aug 2024 13:13:49 +0900 Subject: [PATCH 3/4] =?UTF-8?q?backToTop=E3=81=A8=E3=81=84=E3=81=86?= =?UTF-8?q?=E5=90=8D=E5=89=8D=E3=81=B8=E7=B5=B1=E4=B8=80=E3=81=A7=E3=81=8D?= =?UTF-8?q?=E3=81=A6=E3=81=84=E3=81=AA=E3=81=8B=E3=81=9F=E3=81=AE=E3=81=A7?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0=E5=AF=BE=E5=BF=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/backToTop.js | 2 +- src/js/index.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/js/backToTop.js b/src/js/backToTop.js index 9a19c07..7f4bdbf 100644 --- a/src/js/backToTop.js +++ b/src/js/backToTop.js @@ -13,7 +13,7 @@ function backToTop() { export function createBackToTopBtn() { if(!backToTopBtn) { backToTopBtn = document.createElement('button') - backToTopBtn.classList.add('aw_scrollToTop') + backToTopBtn.classList.add('aw_backToTop') backToTopBtn.textContent = 'トップへ戻る' backToTopBtn.style.display = 'none' diff --git a/src/js/index.js b/src/js/index.js index 53e672d..03a8bb5 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -2,7 +2,7 @@ import { addDefaultTopMenStyle, initToggleTopMenu } from './topMenu' import { addNoScrollClass, saveMainMenuScrollPosition, restoreMainMenuScrollPosition } from './mainMenu' import { addDefaultSidebarStyle, initToggleSidebar } from './sidebar' import { waitForBilling, checkTrial, copyBillingContainer } from './billing' -import { createBckToTopBtn, toggleBackToTopBtn } from './backToTop' +import { createBackToTopBtn, toggleBackToTopBtn } from './backToTop' /* ちらつき防止のため、topMenuの初期スタイルを追加する */ addDefaultTopMenStyle() @@ -62,7 +62,7 @@ window.addEventListener('load', restoreMainMenuScrollPosition); */ window.addEventListener('scroll', toggleBackToTopBtn) window.addEventListener('DOMContentLoaded', () => { - createBckToTopBtn() + createBackToTopBtn() hiddenTabsButtons() addFeedbackLink() From cb39ebb9b6d807830d387c6edffa4e63083eb8b5 Mon Sep 17 00:00:00 2001 From: morioka-hibiki Date: Tue, 20 Aug 2024 13:58:31 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=83=87?= =?UTF-8?q?=E3=82=B6=E3=82=A4=E3=83=B3=E3=81=AE=E8=AA=BF=E6=95=B4=E3=81=A8?= =?UTF-8?q?=E3=80=81=E3=82=B9=E3=82=AF=E3=83=AD=E3=83=BC=E3=83=AB=E3=82=B9?= =?UTF-8?q?=E3=83=94=E3=83=BC=E3=83=89=E3=82=92=E8=AA=BF=E6=95=B4=E3=81=A7?= =?UTF-8?q?=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/backToTop.js | 15 ++++++++------- src/sass/components/buttons.scss | 6 +++--- stylesheets/images/arrow_upward_onFill.svg | 3 +++ 3 files changed, 14 insertions(+), 10 deletions(-) create mode 100644 stylesheets/images/arrow_upward_onFill.svg diff --git a/src/js/backToTop.js b/src/js/backToTop.js index 7f4bdbf..ffe191e 100644 --- a/src/js/backToTop.js +++ b/src/js/backToTop.js @@ -3,11 +3,12 @@ */ let backToTopBtn = null -function backToTop() { - window.scrollTo({ - top: 0, - behavior: 'smooth' - }) +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() { @@ -17,7 +18,7 @@ export function createBackToTopBtn() { backToTopBtn.textContent = 'トップへ戻る' backToTopBtn.style.display = 'none' - backToTopBtn.addEventListener('click', backToTop) + backToTopBtn.addEventListener('click', () => backToTop(2)) document.body.appendChild(backToTopBtn) } @@ -34,4 +35,4 @@ export function toggleBackToTopBtn() { } else { backToTopBtn.style.display = 'none' } -} +} \ No newline at end of file diff --git a/src/sass/components/buttons.scss b/src/sass/components/buttons.scss index b85152d..e8a3c69 100644 --- a/src/sass/components/buttons.scss +++ b/src/sass/components/buttons.scss @@ -57,9 +57,9 @@ // topへ戻るボタン（LIFよりは下に配置するためのz-index指定） .aw_backToTop { - @extend .BTN_TERTIARY_ICON_ONLY_OUTLINED; - background-image: url(images/expand_less_dark.svg); - @apply fixed right-4 bottom-4 z-[499] + // @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の開閉ボタン diff --git a/stylesheets/images/arrow_upward_onFill.svg b/stylesheets/images/arrow_upward_onFill.svg new file mode 100644 index 0000000..e9db856 --- /dev/null +++ b/stylesheets/images/arrow_upward_onFill.svg @@ -0,0 +1,3 @@ + + +