src/components/common/PageFooter.vue

@@ -24,8 +24,8 @@
         <router-link
           to="/login"
           class="flex h-11 w-11 items-center justify-center rounded-lg text-sm transition duration-200 hover:bg-[#dcebed] dark:hover:bg-[#294047]"
-          :aria-label="t('admin.login.title')"
-          :title="t('admin.login.title')"
+          :aria-label="t('manage.login.title')"
+          :title="t('manage.login.title')"
           :class="[
             isDarkMode
               ? 'text-gray-400 hover:text-indigo-400'

src/views/manage/SystemSettingsView.vue

@@ -24,6 +24,13 @@ const {
   toggleConfigFlag
 } = useSystemConfig()
 
+const scrollToSection = (section: string) => {
+  document.getElementById(`settings-${section}`)?.scrollIntoView({
+    behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
+    block: 'start'
+  })
+}
+
 onMounted(() => {
   void refreshConfig()
 })
@@ -73,7 +80,7 @@ onMounted(() => {
       class="mb-4 flex gap-2 overflow-x-auto pb-2"
       :aria-label="t('manage.settings.sectionNavigation')"
     >
-      <a
+      <button
         v-for="section in [
           ['general', t('manage.settings.basicSettings')],
           ['storage', t('manage.settings.storageSettings')],
@@ -81,12 +88,13 @@ onMounted(() => {
           ['access', t('manage.settings.errorLimits')]
         ]"
         :key="section[0]"
-        :href="`#settings-${section[0]}`"
+        type="button"
         class="inline-flex min-h-11 shrink-0 items-center rounded-full border px-4 text-sm font-medium"
         :class="isDarkMode ? 'border-[#40545c] bg-[#263941] text-[#d8e3e5]' : 'border-[#c8d8dc] bg-[#edf4f5] text-[#415d66]'"
+        @click="scrollToSection(section[0])"
       >
         {{ section[1] }}
-      </a>
+      </button>
     </nav>
 
     <div