(add) 上に戻るボタン

fix #35

app.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import TopIco from 'bi/arrow-up.svg';
 import type { LocaleObject } from '@nuxtjs/i18n/dist/runtime/composables';
 import NProgress from 'nprogress';
 import type { Graph, Thing } from 'schema-dts';
@@ -133,6 +134,36 @@ useHead((): Record<string, any> => ({
         { type: "application/ld+json", children: getLdJson(route.meta.graph) }
     ],
 }));
+
+/** サイト全体でひとつのScroll Posiitionを使う */
+const scrollPos = useState('miHub_global_scrollPos', () => 0);
+
+async function updatePos() {
+    scrollPos.value = document.body.getBoundingClientRect().y;
+}
+
+if (process.client) {
+    window.addEventListener('scroll', updatePos);
+    window.addEventListener('resize', updatePos);
+}
+
+onUnmounted(() => {
+    if (process.client) {
+        window.removeEventListener('scroll', updatePos);
+        window.removeEventListener('resize', updatePos);
+    }
+});
+
+const hideFrom = computed(() => route.meta.scrollButton ? route.meta.scrollButton?.hideFrom ?? -45 : -45);
+const sbPosition = computed(() => route.meta.scrollButton ? { x: route.meta.scrollButton?.customPosition?.x ?? '2.5rem', y: route.meta.scrollButton?.customPosition?.y ?? '2.5rem' } ?? { x: '2.5rem', y: '2.5rem' } : { x: '2.5rem', y: '2.5rem' });
+
+function scrollToTop() {
+    if (!process.client) return;
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+    });
+}
 </script>
 <template>
     <div class="text-slate-800 dark:text-slate-200 bg-slate-100 dark:bg-gray-900">
@@ -143,5 +174,22 @@ useHead((): Record<string, any> => ({
         <ClientOnly>
             <LazyGAiChan />
         </ClientOnly>
+        <button
+            v-if="$route.meta.scrollButton !== false"
+            :class="[
+                'fixed h-14 w-14 p-[1.125rem] rounded-full bg-accent-600 text-white shadow-lg transition-opacity',
+                (hideFrom >= scrollPos) ? 'opacity-75 hover:opacity-100' : 'opacity-0 pointer-events-none',
+                $route.meta.scrollButton?.customClass ?? '',
+                $style.scrollToTopButton,
+            ]"
+            @click="scrollToTop"
+        ><TopIco class="h-5 w-5 stroke-1 stroke-current" /></button>
     </div>
 </template>
+
+<style module>
+.scrollToTopButton {
+    bottom: v-bind(sbPosition.y);
+    right: v-bind(sbPosition.x);
+}
+</style>

components/g/Nav.vue

@@ -138,21 +138,5 @@ function rotateColorMode() {
     colorMode.preference = values[next];
 }
 
-const scrollPos = ref(0);
-
-async function updatePos() {
-    scrollPos.value = document.body.getBoundingClientRect().y;
-}
-
-if (process.client) {
-    window.addEventListener('scroll', updatePos);
-    window.addEventListener('resize', updatePos);
-}
-
-onUnmounted(() => {
-    if (process.client) {
-        window.removeEventListener('scroll', updatePos);
-        window.removeEventListener('resize', updatePos);
-    }
-});
+const scrollPos = useState('miHub_global_scrollPos');
 </script>

pages/mi-web.vue

@@ -35,4 +35,5 @@ const path = computed<string>(() => {
 })
 
 meta.title = t('_goToMisskey.title');
+meta.scrollButton = false;
 </script>

pages/servers/index.vue

@@ -62,6 +62,11 @@ function setServerStats(val: InstancesStatsObj) {
 
 route.meta.title = t('_servers.title');
 route.meta.description = t('_servers.description');
+route.meta.scrollButton = {
+    customPosition: {
+        y: '4.5rem',
+    }
+};
 </script>
 
 <style scoped>

pages/share.vue

@@ -21,4 +21,5 @@ const { meta, query } = useRoute();
 const { t } = useI18n();
 
 meta.title = t('_share.title');
+meta.scrollButton = false;
 </script>

types/misc.d.ts

@@ -1,4 +1,5 @@
 import type { LocaleCodes } from './../nuxt.config';
+import type { ComputedRef } from 'vue-demi'
 
 declare module '*.svg' {
     import { FunctionalComponent, SVGAttributes } from 'vue'
@@ -44,4 +45,11 @@ declare module 'nuxt/schema' {
     }
 }
 
+declare module 'vue-i18n' {
+    interface ComposerCustomProperties {
+        // 厳格に定義し直す
+        locales: ComputedRef<LocaleObject[]>
+    }
+}
+
 export { };

types/router.d.ts

@@ -9,5 +9,13 @@ declare module 'vue-router' {
         title?: string;
         graph?: Thing[];
         thumbnail?: string;
+        scrollButton?: false | {
+            hideFrom?: number;
+            customPosition?: {
+                x?: string;
+                y?: string;
+            };
+            customClass?: string;
+        };
     }
 }