Somewhat fixed problem with pages not going back up when changing dynamic slug

src/components/AppLayout.tsx

@@ -6,6 +6,7 @@ import { prettyLanguage, prettySlug } from "helpers/formatters";
 import { getOgImage, ImageQuality, OgImage } from "helpers/img";
 import { Immutable } from "helpers/types";
 import { useMediaMobile } from "hooks/useMediaQuery";
+import { AnchorIds } from "hooks/useScrollTopOnChange";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
@@ -140,7 +141,6 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
 
   return (
     <div
-      id="MyAppLayout"
       className={`${
         appLayout.darkMode ? "set-theme-dark" : "set-theme-light"
       } ${
@@ -209,6 +209,7 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
 
         {/* Content panel */}
         <div
+          id={AnchorIds.CONTENT_PANEL}
           className={`[grid-area:content] overflow-y-scroll bg-light texture-paper-dots`}
         >
           {contentPanel ? (

src/components/Library/ScanSetCover.tsx

@@ -57,7 +57,7 @@ export function ScanSetCover(props: Immutable<Props>): JSX.Element {
               className="flex flex-row flex-wrap place-items-center
               gap-6 text-base pt-10 first-of-type:pt-0"
             >
-              <h2 id={"cover"} className="text-2xl">
+              <h2 id="cover" className="text-2xl">
                 {"Cover"}
               </h2>
 

src/hooks/useScrollTopOnChange.ts

@@ -0,0 +1,12 @@
+import { DependencyList, useEffect } from "react";
+
+export enum AnchorIds {
+  CONTENT_PANEL = "contentPanel495922447721572",
+}
+
+// Scroll to top of element "id" when "deps" update.
+export function useScrollTopOnChange(id: AnchorIds, deps: DependencyList) {
+  useEffect(() => {
+    document.querySelector(`#${id}`)?.scrollTo({ top: 0, behavior: "smooth" });
+  }, deps);
+}

src/pages/contents/[slug]/index.tsx

@@ -24,6 +24,7 @@ import {
 import { getStatusDescription } from "helpers/others";
 import { ContentWithTranslations, Immutable } from "helpers/types";
 import { useMediaMobile } from "hooks/useMediaQuery";
+import { AnchorIds, useScrollTopOnChange } from "hooks/useScrollTopOnChange";
 import { useSmartLanguage } from "hooks/useSmartLanguage";
 import {
   GetStaticPathsContext,
@@ -45,6 +46,8 @@ export default function Content(props: Immutable<Props>): JSX.Element {
     languageExtractor: (item) => item.language?.data?.attributes?.code,
   });
 
+  useScrollTopOnChange(AnchorIds.CONTENT_PANEL, [selectedTranslation]);
+
   const previousContent = content.group?.data?.attributes?.contents
     ? getPreviousContent(
         content.group.data.attributes.contents.data,

src/pages/library/[slug]/index.tsx

@@ -37,6 +37,7 @@ import { convertMmToInch } from "helpers/numbers";
 import { sortContent } from "helpers/others";
 import { Immutable } from "helpers/types";
 import { useLightBox } from "hooks/useLightBox";
+import { AnchorIds, useScrollTopOnChange } from "hooks/useScrollTopOnChange";
 import {
   GetStaticPathsContext,
   GetStaticPathsResult,
@@ -57,6 +58,8 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
   const { item, langui, currencies } = props;
   const appLayout = useAppLayout();
 
+  useScrollTopOnChange(AnchorIds.CONTENT_PANEL, [item]);
+
   const isVariantSet =
     item?.metadata?.[0]?.__typename === "ComponentMetadataGroup" &&
     item.metadata[0].subtype?.data?.attributes?.slug === "variant-set";