refs #4655 Go to top when clicking timeline title

This commit is contained in:
AkiraFukushima 2024-03-08 21:15:56 +09:00
parent 446005dafe
commit 000e289812
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
2 changed files with 16 additions and 2 deletions

View File

@ -173,11 +173,18 @@ export default function Notifications(props: Props) {
return 'timeline' return 'timeline'
} }
const backToTop = () => {
scrollerRef.current.scrollTo({
top: 0,
behavior: 'smooth'
})
}
return ( return (
<div className="flex timeline-wrapper"> <div className="flex timeline-wrapper">
<section className={`h-full ${timelineClass()}`}> <section className={`h-full ${timelineClass()}`}>
<div className="w-full bg-blue-950 text-blue-100 p-2 flex justify-between"> <div className="w-full bg-blue-950 text-blue-100 p-2 flex justify-between">
<div className="text-lg font-bold"> <div className="text-lg font-bold cursor-pointer" onClick={() => backToTop()}>
<FormattedMessage id="timeline.notifications" /> <FormattedMessage id="timeline.notifications" />
</div> </div>
<div className="w-64 text-xs text-right"> <div className="w-64 text-xs text-right">

View File

@ -204,11 +204,18 @@ export default function Timeline(props: Props) {
return 'timeline' return 'timeline'
} }
const backToTop = () => {
scrollerRef.current.scrollTo({
top: 0,
behavior: 'smooth'
})
}
return ( return (
<div className="flex timeline-wrapper"> <div className="flex timeline-wrapper">
<section className={`h-full ${timelineClass()}`}> <section className={`h-full ${timelineClass()}`}>
<div className="w-full bg-blue-950 text-blue-100 p-2 flex justify-between"> <div className="w-full bg-blue-950 text-blue-100 p-2 flex justify-between">
<div className="text-lg font-bold"> <div className="text-lg font-bold cursor-pointer" onClick={() => backToTop()}>
{props.timeline.match(/list_(\d+)/) ? <>{list && list.title}</> : <FormattedMessage id={`timeline.${props.timeline}`} />} {props.timeline.match(/list_(\d+)/) ? <>{list && list.title}</> : <FormattedMessage id={`timeline.${props.timeline}`} />}
</div> </div>
<div className="w-64 text-xs"> <div className="w-64 text-xs">