🐛 fix: add smooth scroll to top on 'More' button click in Title component (#10178)

* 💄 style: implement smooth scroll to top functionality in Nav and Title components

* fix: update link handling in Title component for improved navigation

* fix: enhance pagination scrolling behavior for mobile responsiveness

src/app/[variants]/(main)/discover/(list)/_layout/Mobile/Nav.tsx

@@ -13,6 +13,15 @@ import { DiscoverTab } from '@/types/discover';
 
 import { useNav } from '../../../features/useNav';
 
+const SCROLL_CONTAINER_ID = 'lobe-mobile-scroll-container';
+
+const scrollToTop = () => {
+  const scrollableElement = document?.querySelector(`#${SCROLL_CONTAINER_ID}`);
+
+  if (!scrollableElement) return;
+  scrollableElement.scrollTo({ behavior: 'smooth', top: 0 });
+};
+
 export const useStyles = createStyles(({ css, token }) => ({
   activeNavItem: css`
     background: ${token.colorFillTertiary};
@@ -44,7 +53,9 @@ const Nav = memo(() => {
         <ActionIcon
           color={theme.colorText}
           icon={MenuIcon}
-          onClick={() => setOpen(true)}
+          onClick={() => {
+            setOpen(true);
+          }}
           size={{ blockSize: 32, size: 18 }}
         />
         {activeItem?.label}
@@ -76,6 +87,7 @@ const Nav = memo(() => {
           compact
           items={items}
           onClick={({ key }) => {
+            scrollToTop();
             if (key === DiscoverTab.Home) {
               navigate('/discover');
             } else {

src/app/[variants]/(main)/discover/(list)/features/Pagination.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Pagination as Page } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStyles, useResponsive } from 'antd-style';
 import { memo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
@@ -9,6 +9,8 @@ import { SCROLL_PARENT_ID } from '@/app/[variants]/(main)/discover/features/cons
 import { useQuery } from '@/hooks/useQuery';
 import { DiscoverTab } from '@/types/discover';
 
+const SCROLL_CONTAINER_ID = 'lobe-mobile-scroll-container';
+
 const useStyles = createStyles(({ css, token, prefixCls }) => {
   return {
     page: css`
@@ -37,13 +39,15 @@ const Pagination = memo<PaginationProps>(({ tab, currentPage, total, pageSize })
   const { page } = useQuery();
   const navigate = useNavigate();
   const location = useLocation();
+  const { mobile } = useResponsive();
 
   const handlePageChange = (newPage: number) => {
     const searchParams = new URLSearchParams(location.search);
     searchParams.set('page', String(newPage));
     navigate(`/discover/${tab}?${searchParams.toString()}`);
 
-    const scrollableElement = document?.querySelector(`#${SCROLL_PARENT_ID}`);
+    const scrollContainerId = mobile ? SCROLL_CONTAINER_ID : SCROLL_PARENT_ID;
+    const scrollableElement = document?.querySelector(`#${scrollContainerId}`);
     if (!scrollableElement) return;
     scrollableElement.scrollTo({ behavior: 'smooth', top: 0 });
   };

src/app/[variants]/(main)/discover/components/Title.tsx

@@ -1,12 +1,16 @@
 'use client';
 
 import { Button, Icon, Tag } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
+import { createStyles, useResponsive } from 'antd-style';
 import { ChevronRight } from 'lucide-react';
 import { ReactNode, memo } from 'react';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 import { Link } from 'react-router-dom';
 
+import { SCROLL_PARENT_ID } from '../features/const';
+
+const SCROLL_CONTAINER_ID = 'lobe-mobile-scroll-container';
+
 const useStyles = createStyles(({ css, responsive, token }) => ({
   more: css`
     display: flex;
@@ -47,7 +51,19 @@ interface TitleProps extends FlexboxProps {
 
 const Title = memo<TitleProps>(({ tag, children, moreLink, more }) => {
   const { styles } = useStyles();
+  const { mobile } = useResponsive();
   const title = <h2 className={styles.title}>{children}</h2>;
+
+  const handleMoreClick = () => {
+    if (!moreLink) return;
+
+    const scrollContainerId = mobile ? SCROLL_CONTAINER_ID : SCROLL_PARENT_ID;
+    const scrollableElement = document?.querySelector(`#${scrollContainerId}`);
+
+    if (!scrollableElement) return;
+    scrollableElement.scrollTo({ behavior: 'smooth', top: 0 });
+  };
+
   return (
     <Flexbox align={'center'} gap={16} horizontal justify={'space-between'} width={'100%'}>
       {tag ? (
@@ -59,7 +75,11 @@ const Title = memo<TitleProps>(({ tag, children, moreLink, more }) => {
         title
       )}
       {moreLink && (
-        <Link target={moreLink.startsWith('http') ? '_blank' : undefined} to={`/discover${moreLink}`}>
+        <Link
+          onClick={handleMoreClick}
+          target={moreLink.startsWith('http') ? '_blank' : undefined}
+          to={moreLink}
+        >
           <Button className={styles.more} style={{ paddingInline: 6 }} type={'text'}>
             <span>{more}</span>
             <Icon icon={ChevronRight} />