@@ -2516,6 +2516,34 @@ test.describe('Docs 2026 in-article navigation', () => {
     await page.mouse.wheel(0, 2000)
     await expect(trigger).not.toContainText('Macintosh')
   })
+
+  // On short viewports 15% of the height sits above the anchor scroll margin.
+  test('a menu jump on a short viewport activates that section below the sticky bars', async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 1366, height: 640 })
+    await page.goto('/get-started/foo/anchor-scrolling')
+    await turnOffExperimentsInPage(page)
+
+    const subBar = page.getByTestId('overview-subbar')
+    const trigger = subBar.getByRole('button')
+    await trigger.click()
+    await page
+      .getByTestId('overview-menu')
+      .getByRole('link', { name: 'Target heading', exact: true })
+      .click()
+    await expect(page).toHaveURL(/#target-heading$/)
+    await expect(trigger).toContainText('Target heading')
+
+    const subBarBox = (await subBar.boundingBox())!
+    const headingBox = (await page.locator('#target-heading').boundingBox())!
+    expect(headingBox.y).toBeGreaterThanOrEqual(subBarBox.y + subBarBox.height - 2)
+
+    await trigger.click()
+    await expect(
+      page.getByTestId('overview-menu').getByRole('link', { name: 'Target heading', exact: true }),
+    ).toHaveAttribute('aria-current', 'location')
+  })
 })
 
 test.describe('CookBookFilter component', () => {
 
@@ -41,8 +41,12 @@ export function ActiveSectionProvider({ children }: { children: ReactNode }) {
 
     if (pairs.length === 0) return
 
-    // Match the observer band: a heading becomes active in the top 15% of the viewport.
-    const bandThreshold = () => window.innerHeight * 0.15
+    // Floor the 15% band 1px past the :target scroll margin so short viewports activate a jumped-to heading.
+    const bandThreshold = () => {
+      const target = document.querySelector(':target')
+      const margin = target ? parseFloat(getComputedStyle(target).scrollMarginTop) || 0 : 0
+      return Math.max(window.innerHeight * 0.15, margin + 1)
+    }
 
     // Actual scroll positions keep upward scrolling tied to the previous heading or Overview.
     const computeActive = () => {
@@ -80,13 +84,16 @@ export function ActiveSectionProvider({ children }: { children: ReactNode }) {
     for (const { el } of pairs) observer.observe(el)
     window.addEventListener('scroll', scheduleUpdate, { passive: true })
     window.addEventListener('resize', scheduleUpdate)
+    // A hash change can move :target and its threshold without any scroll or intersection change.
+    window.addEventListener('hashchange', scheduleUpdate)
     computeActive()
 
     return () => {
       if (frame) cancelAnimationFrame(frame)
       observer.disconnect()
       window.removeEventListener('scroll', scheduleUpdate)
       window.removeEventListener('resize', scheduleUpdate)
+      window.removeEventListener('hashchange', scheduleUpdate)
     }
     // Re-run when platform or tool selection changes which headings are visible.
   }, [miniTocItems, selectedPlatform, tool])
 
@@ -1,5 +1,3 @@
-@import "src/frame/stylesheets/breakpoint-xxl.scss";
-
 // Brand SubdomainNavBar height uses rem, so the header portion of sticky offsets must use rem too.
 // Brand sets --base-size-64 at 4rem and subtracts --base-size-8, 0.5rem, below its medium
 // breakpoint of 47.99rem. A px value or px breakpoint drifts when readers change the browser
@@ -13,13 +11,11 @@
 }
 
 // https://tetralogical.com/blog/2023/06/08/focus-in-view/
-
+// Land anchor targets below every sticky bar. DefaultLayout.module.scss sets --docs-sticky-stack
+// on the content column, including the In this article sub-bar when it shows.
 :target {
-  scroll-margin-top: calc(var(--docs-header-height) + 40px) !important;
-
-  @include breakpoint-xxl {
-    scroll-margin-top: calc(
-      var(--docs-header-height) + 44px
-    ) !important; // Include the secondary bar below the header.
-  }
+  scroll-margin-top: var(
+    --docs-sticky-stack,
+    calc(var(--docs-header-height) + 45px)
+  ) !important;
 }