UI: Prevent docs page scroll reset on HMR re-render

code/addons/docs/template/stories/docs2/UtfSymbolScroll.mdx

@@ -6,9 +6,11 @@ import { Meta } from '@storybook/addon-docs/blocks';
 
 > Instruction below works only in iframe.html. Unknown code in normal mode (with manager) removes hash from url.
 
-Click on [link](#anchor-with-utf-symbols-абвг). That will jump scroll to anchor after green block below. Then reload page and 
-it should smooth-scroll to that anchor. 
+Click on [link](#anchor-with-utf-symbols-абвг). That will jump scroll to anchor after green block below. Then reload page and
+it should smooth-scroll to that anchor.
 
-<div style={{ height: "1500px", background: "green", color: "white" }}>Space for scroll test</div>
+<div style={{ height: "1500px", background: "green", color: "white" }}>
+  Space for scroll test
+</div>
 
-## Anchor with utf symbols (абвг)
+## Anchor with utf symbols (абвг)

code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx

@@ -458,7 +458,7 @@ export class PreviewWithSelection<TRenderer extends Renderer> extends Preview<TR
       );
     } else {
       this.currentRender.renderToElement(
-        this.view.prepareForDocs(),
+        this.view.prepareForDocs({ scrollReset: storyIdChanged || viewModeChanged }),
         // This argument is used for docs, which is currently only compatible with HTMLElements
         this.renderStoryToElement.bind(this) as any
       );

code/core/src/preview-api/modules/preview-web/View.ts

@@ -4,7 +4,7 @@ export interface View<TStorybookRoot> {
   // Get ready to render a story, returning the element to render to
   prepareForStory(story: PreparedStory<any>): TStorybookRoot;
 
-  prepareForDocs(): TStorybookRoot;
+  prepareForDocs(options?: { scrollReset?: boolean }): TStorybookRoot;
 
   showErrorDisplay(err: { message?: string; stack?: string }): void;
 

code/core/src/preview-api/modules/preview-web/WebView.ts

@@ -81,13 +81,19 @@ export class WebView implements View<HTMLElement> {
     return document.getElementById('storybook-root')!;
   }
 
-  prepareForDocs() {
+  prepareForDocs({ scrollReset = true }: { scrollReset?: boolean } = {}) {
     this.showMain();
     this.showDocs();
     this.applyLayout('fullscreen');
 
-    document.documentElement.scrollTop = 0;
-    document.documentElement.scrollLeft = 0;
+    // Only reset scroll when navigating to a new docs page, not on HMR re-renders.
+    // Without this guard, hot-reloading a story file while scrolled down on a docs page
+    // causes the page to jump back to the top.
+
+    if (scrollReset) {
+      document.documentElement.scrollTop = 0;
+      document.documentElement.scrollLeft = 0;
+    }
 
     return this.docsRoot();
   }