The drawer that let the page slide out from under it

html {
  /* Added for anchor links. Nothing to do with the drawer. */
  scroll-behavior: smooth;
}

useEffect(() => {
  if (!open || !narrow) return;
 
  const y = window.scrollY;
  const body = document.body;
  const gutter =
    window.innerWidth - document.documentElement.clientWidth;
  const before = { /* every inline style we are about to touch */ };
 
  body.style.position = "fixed";
  body.style.top = `-${y}px`;
  body.style.left = "0";
  body.style.right = "0";
  body.style.width = "100%";
  if (gutter > 0) body.style.paddingRight = `${gutter}px`;

   return () => {
     Object.assign(body.style, before);
     if (!restoreScroll.current) return;
 
-    window.scrollTo(0, y);
+    // Jump. Do not take the smooth ride: the inline value only
+    // affects this one call, so the global rule stays in force.
+    const root = document.documentElement;
+    const prevBehavior = root.style.scrollBehavior;
+    root.style.scrollBehavior = "auto";
+    window.scrollTo(0, y);
+    root.style.scrollBehavior = prevBehavior;
   };

   if (e.key === "Escape") {
     e.preventDefault();
     setOpen(false);
-    openerRef.current?.focus();
+    // Without preventScroll the browser scrolls the hamburger
+    // into view — smoothly — and undoes the restore.
+    openerRef.current?.focus({ preventScroll: true });
     return;
   }

const sampleFrames = useCallback(() => {
  const vp = viewportRef.current;
  if (!vp) return;
  const seen: number[] = [];
  let n = 0;
  const step = () => {
    seen.push(Math.round(vp.scrollTop));
    n += 1;
    if (n < 5) {
      requestAnimationFrame(step);
    } else {
      setFrames(seen);
    }
  };
  requestAnimationFrame(step);
}, []);