diff --git a/addons/docs/src/blocks/mdx.tsx b/addons/docs/src/blocks/mdx.tsx
index b38c948976d..d650c7a232c 100644
--- a/addons/docs/src/blocks/mdx.tsx
+++ b/addons/docs/src/blocks/mdx.tsx
@@ -1,7 +1,8 @@
 import React, { FC, SyntheticEvent } from 'react';
 import { Source } from '@storybook/components';
 import { Code, components } from '@storybook/components/html';
-import { document } from 'global';
+import { document, window } from 'global';
+import { isNil } from 'lodash';
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { scrollToElement } from './utils';
 
@@ -69,15 +70,31 @@ const AnchorInPage: FC<AnchorInPageProps> = ({ href, children }) => (
 
 interface AnchorMdxProps {
   href: string;
+  target: string;
 }
 
-export const AnchorMdx: React.FC<AnchorMdxProps> = ({ href, children, ...rest }) => {
-  if (href.startsWith('#')) {
-    return <AnchorInPage href={href}>{children}</AnchorInPage>;
+export const AnchorMdx: React.FC<AnchorMdxProps> = ({ href, target, children, ...rest }) => {
+  if (!isNil(href)) {
+    if (href.startsWith('#')) {
+      // Enable scrolling for in-page anchors.
+      return <AnchorInPage href={href}>{children}</AnchorInPage>;
+    }
+    if (target !== '_blank') {
+      // Links to other pages of SB should use the base URL of the top level iframe instead of the base URL of the preview iframe.
+      const parentUrl = new URL(window.parent.location.href);
+      const newHref = `${parentUrl.origin}${href}`;
+
+      return (
+        <A href={newHref} target={target} {...rest}>
+          {children}
+        </A>
+      );
+    }
   }
 
+  // External URL dont need any modification.
   return (
-    <A href={href} {...rest}>
+    <A href={href} target={target} {...rest}>
       {children}
     </A>
   );
diff --git a/examples/official-storybook/stories/addon-docs/docs-only.stories.mdx b/examples/official-storybook/stories/addon-docs/docs-only.stories.mdx
index d748141b63f..f68406599d3 100644
--- a/examples/official-storybook/stories/addon-docs/docs-only.stories.mdx
+++ b/examples/official-storybook/stories/addon-docs/docs-only.stories.mdx
@@ -7,3 +7,9 @@ import { Meta } from '@storybook/addon-docs/blocks';
 This file is a documentation-only MDX file, i.e. it doesn't contain any `<Story>` definitions.
 
 Therefore, it shows up in the navigation UI as a document icon.
+
+<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
+
+## Bottom
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus urna id nibh mollis, varius facilisis sapien scelerisque. Pellentesque lobortis convallis mi, at accumsan nisl sollicitudin id. Aliquam vitae elementum libero. Nulla blandit est turpis, a consectetur ante rhoncus a. Integer eu quam eu mauris pharetra elementum. Donec ex nisl, tincidunt ut tincidunt id, bibendum ut sem. Sed in congue tortor, a congue dolor. Fusce a magna vel nulla laoreet sagittis.
diff --git a/examples/official-storybook/stories/addon-docs/markdown.stories.mdx b/examples/official-storybook/stories/addon-docs/markdown.stories.mdx
index a711700e13c..339d4d14cc2 100644
--- a/examples/official-storybook/stories/addon-docs/markdown.stories.mdx
+++ b/examples/official-storybook/stories/addon-docs/markdown.stories.mdx
@@ -133,6 +133,10 @@ Right aligned columns
 
 [link with title](https://hichroma.com 'Insert title!')
 
+[link to in page anchor h1](#h1-heading)
+
+[link to another story](/?path=/docs/addons-docs-docs-only--page#bottom)
+
 ## Images
 
 ![Minion](https://octodex.github.com/images/minion.png)