fix(Pagination): Improve the success rate of "back to top" operations on mobile devices.

ui/src/components/Comment/index.tsx

@@ -10,7 +10,12 @@ import { marked } from 'marked';
 import * as Types from '@/common/interface';
 import { Modal } from '@/components';
 import { usePageUsers, useReportModal } from '@/hooks';
-import { matchedUsers, parseUserInfo, scrollTop, bgFadeOut } from '@/utils';
+import {
+  matchedUsers,
+  parseUserInfo,
+  scrollToElementTop,
+  bgFadeOut,
+} from '@/utils';
 import { tryNormalLogged } from '@/utils/guard';
 import {
   useQueryComments,
@@ -43,7 +48,7 @@ const Comment = ({ objectId, mode, commentId }) => {
   const scrollCallback = useCallback((el, co) => {
     if (pageIndex === 0 && co.comment_id === commentId) {
       setTimeout(() => {
-        scrollTop(el);
+        scrollToElementTop(el);
         bgFadeOut(el);
       }, 100);
     }

ui/src/components/Pagination/index.tsx

@@ -3,6 +3,8 @@ import { Pagination } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams, useNavigate, useLocation } from 'react-router-dom';
 
+import { scrollToDocTop } from '@/utils';
+
 interface Props {
   currentPage: number;
   pageSize: number;
@@ -49,7 +51,7 @@ const PageItem = ({ page, currentPage, path }: PageItemProps) => {
         e.preventDefault();
         e.stopPropagation();
         navigate(path);
-        window.scrollTo(0, 0);
+        scrollToDocTop();
       }}>
       {page}
     </Pagination.Item>
@@ -91,7 +93,7 @@ const Index: FC<Props> = ({
           onClick={(e) => {
             e.preventDefault();
             navigate(handleParams(currentPage - 1));
-            window.scrollTo(0, 0);
+            scrollToDocTop();
           }}>
           {t('prev')}
         </Pagination.Prev>
@@ -186,7 +188,7 @@ const Index: FC<Props> = ({
           onClick={(e) => {
             e.preventDefault();
             navigate(handleParams(currentPage + 1));
-            window.scrollTo(0, 0);
+            scrollToDocTop();
           }}>
           {t('next')}
         </Pagination.Next>

ui/src/pages/Questions/Detail/components/Answer/index.tsx

@@ -12,7 +12,7 @@ import {
   FormatTime,
   htmlRender,
 } from '@/components';
-import { scrollTop, bgFadeOut } from '@/utils';
+import { scrollToElementTop, bgFadeOut } from '@/utils';
 import { AnswerItem } from '@/common/interface';
 import { acceptanceAnswer } from '@/services';
 
@@ -60,7 +60,7 @@ const Index: FC<Props> = ({
     if (aid === data.id) {
       setTimeout(() => {
         const element = answerRef.current;
-        scrollTop(element);
+        scrollToElementTop(element);
         if (!searchParams.get('commentId')) {
           bgFadeOut(answerRef.current);
         }

ui/src/pages/Questions/Detail/index.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next';
 import Pattern from '@/common/pattern';
 import { Pagination } from '@/components';
 import { loggedUserInfoStore, toastStore } from '@/stores';
-import { scrollTop } from '@/utils';
+import { scrollToElementTop } from '@/utils';
 import { usePageTags, usePageUsers } from '@/hooks';
 import type {
   ListResult,
@@ -80,7 +80,7 @@ const Index = () => {
       if (page > 0 || order) {
         // scroll into view;
         const element = document.getElementById('answerHeader');
-        scrollTop(element);
+        scrollToElementTop(element);
       }
 
       res.list.forEach((item) => {

ui/src/utils/common.ts

@@ -21,7 +21,7 @@ function formatCount($num: number): string {
   return res;
 }
 
-function scrollTop(element) {
+function scrollToElementTop(element) {
   if (!element) {
     return;
   }
@@ -36,6 +36,15 @@ function scrollTop(element) {
   });
 }
 
+const scrollToDocTop = () => {
+  setTimeout(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  });
+};
+
 const bgFadeOut = (el) => {
   if (el && !el.classList.contains('bg-fade-out')) {
     el.classList.add('bg-fade-out');
@@ -167,7 +176,7 @@ function handleFormError(
   return data;
 }
 
-function diffText(newText: string, oldText: string): string {
+function diffText(newText: string, oldText?: string): string {
   if (!newText) {
     return '';
   }
@@ -181,8 +190,6 @@ function diffText(newText: string, oldText: string): string {
       ?.replace(/<input/gi, '&lt;input');
   }
   const diff = Diff.diffChars(oldText, newText);
-  console.log(diff);
-
   const result = diff.map((part) => {
     if (part.added) {
       if (part.value.replace(/\n/g, '').length <= 0) {
@@ -217,7 +224,8 @@ function diffText(newText: string, oldText: string): string {
 export {
   thousandthDivision,
   formatCount,
-  scrollTop,
+  scrollToElementTop,
+  scrollToDocTop,
   bgFadeOut,
   matchedUsers,
   parseUserInfo,