diff --git a/components/Schedule/Table/Block/index.jsx b/components/Schedule/Table/Block/index.jsx index 8a2e6eec..45c9ca06 100644 --- a/components/Schedule/Table/Block/index.jsx +++ b/components/Schedule/Table/Block/index.jsx @@ -1,11 +1,11 @@ import styles from "./style.module.css"; import Image from "next/image"; import Link from "next/link"; -import { useEffect } from "react"; function BlockItem({ id, coffeeBreak, + date, startTime, endTime, activityType, @@ -21,7 +21,7 @@ function BlockItem({ const block = (
{coffeeBreak && ( @@ -44,13 +44,28 @@ function BlockItem({ {description && ( @@ -127,6 +142,7 @@ export default function Block({ date, detailed, elems }) { id={`${date}-${elem.id}`} focused={elem.focused} detailed={detailed} + date={date} {...elem.activity} /> ))} diff --git a/components/Schedule/Table/index.jsx b/components/Schedule/Table/index.jsx index d10b1824..79ba7735 100644 --- a/components/Schedule/Table/index.jsx +++ b/components/Schedule/Table/index.jsx @@ -2,6 +2,7 @@ import Block from "./Block"; import { isSelected } from "../Day/Filters"; import schedule from "/data/schedule.json"; +import { useEffect } from "react"; function filterElem(filters) { return function (elem) { @@ -62,6 +63,23 @@ export default function Table({ filters, detailed, }) { + useEffect(() => { + if (!(typeof window === "undefined")) { + const targetElement = document?.getElementById(hash); + if (!targetElement) return; + + const elementPosition = targetElement.getBoundingClientRect().top; + + const scroll = () => { + window.scrollTo({ + top: elementPosition, + }); + }; + + requestAnimationFrame(scroll); + } + }, [hash]); + const obj = schedule.find((obj) => obj.date == date); if (obj === undefined || obj.activities === undefined) { diff --git a/layout/Speakers/components/Schedule/Table/Block/index.jsx b/layout/Speakers/components/Schedule/Table/Block/index.jsx index 34af5668..f468860a 100644 --- a/layout/Speakers/components/Schedule/Table/Block/index.jsx +++ b/layout/Speakers/components/Schedule/Table/Block/index.jsx @@ -25,7 +25,7 @@ export default function Block({ const [showSpeaker, setShowSpeaker] = useState(true); return ( -
+
{ + if (typeof window === "undefined") return; + + const { date, speaker } = router.query; + if (date) { + updateDate(date); + } + + if (speaker) { + const targetElement = document?.getElementById(speaker); + if (!targetElement) return; + + const elementPosition = targetElement.getBoundingClientRect().top; + + const scroll = () => { + window.scrollTo({ + top: elementPosition, + behavior: "smooth", + }); + }; + + requestAnimationFrame(scroll); + } + }, [router.query, date]); + const previous_day = () => { const new_date = addDate(date, -1); if (!isAfter(min_date, new_date) && !isAfter(new_date, max_date)) diff --git a/styles/globals.css b/styles/globals.css index b9ae2344..2303209f 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -6,6 +6,7 @@ html { overflow-x: hidden; height: 100%; + scroll-behavior: smooth; } body {