fix(plus): scroll to anchor hook (#10364)

When navigating to a page via anchor link, scroll to the anchor via JS.
We need this for non SSRed pages (mainly plus).

Correct scroll-margins is only supported Firefox (via :target) fully.
For some reason Blink and WebKit seem to not set :target consitently.
To work around this we set scroll-margin for section[id], too.

client/src/app.scss

@@ -122,11 +122,13 @@
   }
 }
 
-:target {
+:target,
+section[id] {
   scroll-margin-top: var(--sticky-header-with-actions-height);
 }
 
-.sticky-header-container.without-actions ~ * :target {
+.sticky-header-container.without-actions ~ * :target,
+.sticky-header-container.without-actions ~ * section[id] {
   scroll-margin-top: var(--sticky-header-without-actions-height);
 }
 

client/src/hooks.ts

@@ -255,3 +255,17 @@ export function useIsIntersecting(
   }, [node, options]);
   return isIntersectingState;
 }
+
+export const useScrollToAnchor = () => {
+  const scrolledRef = React.useRef(false);
+  const { hash } = useLocation();
+  React.useEffect(() => {
+    if (hash && !scrolledRef.current) {
+      const element = document.getElementById(hash.replace("#", ""));
+      if (element) {
+        element.scrollIntoView({ behavior: "instant" });
+        scrolledRef.current = true;
+      }
+    }
+  });
+};

client/src/plus/offer-overview/index.tsx

@@ -1,8 +1,10 @@
+import { useScrollToAnchor } from "../../hooks";
 import OfferHero from "./offer-hero";
 import OfferOverviewFeatures from "./offer-overview-feature";
 import OfferOverviewSubscribe from "./offer-overview-subscribe";
 
 function OfferOverview() {
+  useScrollToAnchor();
   return (
     <div className="offer-overview">
       <OfferHero />

client/src/settings/index.tsx

@@ -7,11 +7,13 @@ import "./index.scss";
 import { Manage } from "./manage";
 import Newsletter from "./newsletter";
 import { ManageAIHelp } from "./ai-help";
+import { useScrollToAnchor } from "../hooks";
 
 const OfflineSettings = React.lazy(() => import("./offline-settings"));
 
 export function Settings() {
   const pageTitle = "Settings";
+  useScrollToAnchor();
   return (
     <>
       <OfflineStatusBar />