[bugfix] Config Page: To reset scroll position to top when the tabs are changed.

src-ui/app/config_page/setting_section/SettingSection.jsx

@@ -2,14 +2,22 @@ import { useRef, useLayoutEffect, useEffect } from "react";
 
 import styles from "./SettingSection.module.scss";
 import { SettingBox } from "./setting_box/SettingBox";
-import { store } from "@store";
+import { store, useStore_SelectedConfigTabId } from "@store";
+import { useSettingBoxScrollPosition } from "@logics_configs";
 
 export const SettingSection = () => {
+    const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
+    const { resetScrollPosition } = useSettingBoxScrollPosition();
     const scrollContainerRef = useRef(null);
+
     useLayoutEffect(() => {
         store.setting_box_scroll_container = scrollContainerRef;
     }, []);
 
+    useEffect(() => {
+        resetScrollPosition();
+    }, [currentSelectedConfigTabId.data]);
+
     return (
         <div ref={scrollContainerRef} className={styles.scroll_container}>
             <div className={styles.container}>

src-ui/logics/configs/useSettingBoxScrollPosition.js

@@ -9,19 +9,25 @@ export const useSettingBoxScrollPosition = () => {
         }
     };
     const restoreScrollPosition = () => {
-
         if (store.setting_box_scroll_container.current) {
             updateSettingBoxScrollPosition((pre) => {
                 store.setting_box_scroll_container.current.scrollTop = pre.data;
                 return pre.data;
             })
         }
-
     };
 
+    const resetScrollPosition = () => {
+        if (store.setting_box_scroll_container.current) {
+            store.setting_box_scroll_container.current.scrollTop = 0;
+            updateSettingBoxScrollPosition(0);
+        }
+    }
+
     return {
         saveScrollPosition,
         restoreScrollPosition,
+        resetScrollPosition,
         currentSettingBoxScrollPosition,
         updateSettingBoxScrollPosition,
     };