{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/navigation/anchor","result":{"data":{"current":{"frontmatter":{"title":"Anchor","order":54,"brief":"The Anchor component is used to create a hyper Link navigation bar.","icon":"doc-anchor"},"fields":{"type":"navigation"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#integrated-usage","title":"Integrated Usage"},{"url":"#size","title":"Size"},{"url":"#rail-theme","title":"Rail Theme"},{"url":"#auto-collapse","title":"Auto Collapse"},{"url":"#show-tooltip","title":"Show Tooltip"},{"url":"#tooltip-position","title":"Tooltip Position"}]},{"url":"#api-reference","title":"API Reference","items":[{"url":"#anchor","title":"Anchor"},{"url":"#anchorlink","title":"Anchor.Link"}]},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"},{"url":"#faq","title":"FAQ"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"en-US\",\n  \"order\": 54,\n  \"category\": \"Navigation\",\n  \"title\": \"Anchor\",\n  \"subTitle\": \"Anchor\",\n  \"icon\": \"doc-anchor\",\n  \"brief\": \"The Anchor component is used to create a hyper Link navigation bar.\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { Anchor } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Basic Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Link\"), \" to create an anchor, click it to jump to the hash tag location.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Anchor } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Anchor>\\n        <Anchor.Link href=\\\"#Basic_Usage\\\" title=\\\"Basic Usage\\\" />\\n        <Anchor.Link href=\\\"#Components\\\" title=\\\"Components\\\" />\\n        <Anchor.Link href=\\\"#Design\\\" title=\\\"Design\\\" />\\n        <Anchor.Link href=\\\"#Blocks\\\" title=\\\"Blocks\\\" />\\n        <Anchor.Link href=\\\"#Theme\\\" title=\\\"Theme\\\" />\\n    </Anchor>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Integrated Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getContainer\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"targetOffset\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"offsetTop\"), \", and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style\"), \" to create a out of the box hyperAnchor.Link navigation bar.\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"getContainer\\uFF1Ayou can set the container of scroll content with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getContainer\"), \" property. Its default value is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"window\"), \".\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"targetOffset: you can set the distance between the anchor point and the top of the container by setting \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"targetOffset\"), \". \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"v>=1.9\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"style\\uFF1Athe default \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"position\"), \" of Anchor is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"relative\"), \". You can customize it with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style\"), \" object.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"offsetTop\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"offsetTop\"), \" can trigger the current Link switch when the scrolling content reaches a specified offset from the top of the container.\"))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React from 'react';\\nimport { Anchor } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const getContainer = () => {\\n        return document.querySelector('window');\\n    };\\n    return (\\n        <div>\\n            <span>See the fixed Anchor on the right </span>\\n            <Anchor\\n                getContainer={getContainer}\\n                offsetTop={100}\\n                targetOffset={100} // v>=1.9\\n                style={{ position: 'fixed', right: '20px', top: '100px', width: '200px', zIndex: 3 }} >\\n                <Anchor.Link href=\\\"#Basic_Usage\\\" title=\\\"Fixed Anchor\\\" />\\n                <Anchor.Link href=\\\"#Integrated_Usage\\\" title=\\\"Integrated Usage\\\" />\\n                <Anchor.Link href=\\\"#Size\\\" title=\\\"Size\\\" />\\n                <Anchor.Link href=\\\"#Rail_Theme\\\" title=\\\"Rail Theme\\\" />\\n                <Anchor.Link href=\\\"#Auto_Collapse\\\" title=\\\"Auto Collapse\\\" />\\n                <Anchor.Link href=\\\"#Show_Tooltip\\\" title=\\\"Show Tooltip\\\" />\\n                <Anchor.Link href=\\\"#Tooltip_Position\\\" title=\\\"Tooltip Position\\\" />\\n                <Anchor.Link href=\\\"#API_Reference\\\" title=\\\"API Reference\\\">\\n                    <Anchor.Link href=\\\"#Anchor\\\" title=\\\"Anchor\\\" />\\n                    <Anchor.Link href=\\\"#Anchor.Link\\\" title=\\\"Anchor.Link\\\" />\\n                </Anchor.Link>\\n            </Anchor>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Size\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can change Anchor size with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"size\"), \" property.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Anchor } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Anchor size={'default'}>\\n        <Anchor.Link href=\\\"#Components\\\" title=\\\"Components\\\" />\\n        <Anchor.Link href=\\\"#Design\\\" title=\\\"Design\\\" />\\n        <Anchor.Link href=\\\"#Blocks\\\" title=\\\"Blocks\\\" />\\n        <Anchor.Link href=\\\"#Theme\\\" title=\\\"Theme\\\" />\\n    </Anchor>\\n);\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Anchor } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Anchor size={'small'}>\\n        <Anchor.Link href=\\\"#Components\\\" title=\\\"Components\\\" />\\n        <Anchor.Link href=\\\"#Design\\\" title=\\\"Design\\\" />\\n        <Anchor.Link href=\\\"#Blocks\\\" title=\\\"Blocks\\\" />\\n        <Anchor.Link href=\\\"#Theme\\\" title=\\\"Theme\\\" />\\n    </Anchor>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Rail Theme\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can change rail color with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"railTheme\"), \" property. Three themes are supported and the default value is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"primary\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Anchor } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const getContainer = () => {\\n        return document.querySelector('window');\\n    };\\n    return (\\n        <div>\\n            <Anchor\\n                railTheme={'primary'}\\n                getContainer={getContainer}\\n                targetOffset={60}\\n                offsetTop={100}>\\n                <Anchor.Link href=\\\"#Size\\\" title=\\\"Size\\\" />\\n                <Anchor.Link href=\\\"#Rail_Theme\\\" title=\\\"Rail Theme\\\" />\\n                <Anchor.Link href=\\\"#Design\\\" title=\\\"Design\\\" />\\n                <Anchor.Link href=\\\"#Blocks\\\" title=\\\"Blocks\\\" />\\n                <Anchor.Link href=\\\"#Theme\\\" title=\\\"Theme\\\" />\\n            </Anchor>\\n        </div>\\n    );\\n};\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Anchor } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const getContainer = () => {\\n        return document.querySelector('window');\\n    };\\n    return (\\n        <div>\\n            <Anchor\\n                railTheme={'tertiary'}\\n                getContainer={getContainer}\\n                targetOffset={60}\\n                offsetTop={100}>\\n                <Anchor.Link href=\\\"#Size\\\" title=\\\"Size\\\" />\\n                <Anchor.Link href=\\\"#Rail_Theme\\\" title=\\\"Rail Theme\\\" />\\n                <Anchor.Link href=\\\"#Design\\\" title=\\\"Design\\\" />\\n                <Anchor.Link href=\\\"#Blocks\\\" title=\\\"Blocks\\\" />\\n                <Anchor.Link href=\\\"#Theme\\\" title=\\\"Theme\\\" />\\n            </Anchor>\\n        </div>\\n    );\\n};\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Anchor } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const getContainer = () => {\\n        return document.querySelector('window');\\n    };\\n    return (\\n        <div>\\n            <Anchor\\n                railTheme={'muted'}\\n                getContainer={getContainer}\\n                targetOffset={60}\\n                offsetTop={100}>\\n                <Anchor.Link href=\\\"#Size\\\" title=\\\"Size\\\" />\\n                <Anchor.Link href=\\\"#Rail_Theme\\\" title=\\\"Rail Theme\\\" />\\n                <Anchor.Link href=\\\"#Design\\\" title=\\\"Design\\\" />\\n                <Anchor.Link href=\\\"#Blocks\\\" title=\\\"Blocks\\\" />\\n                <Anchor.Link href=\\\"#Theme\\\" title=\\\"Theme\\\" />\\n            </Anchor>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Auto Collapse\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Anchor can dynamically display child links with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"autoCollapse\"), \" property. The default is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Anchor } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const getContainer = () => {\\n        return document.querySelector('window');\\n    };\\n    return (\\n        <div>\\n            <Anchor\\n                autoCollapse={true}\\n                getContainer={getContainer}\\n                targetOffset={60}\\n                offsetTop={100}>\\n                <Anchor.Link href=\\\"#Auto_Collapse\\\" title=\\\"1. Auto Collapse\\\">\\n                    <Anchor.Link href=\\\"#Components\\\" title=\\\"1.1 Components\\\">\\n                        <Anchor.Link href=\\\"#Avatar\\\" title=\\\"1.1.1 Avatar\\\" />\\n                        <Anchor.Link href=\\\"#Button\\\" title=\\\"1.1.2 Button\\\" />\\n                        <Anchor.Link href=\\\"#Icon\\\" title=\\\"1.1.3 Icon\\\" />\\n                    </Anchor.Link>\\n                    <Anchor.Link href=\\\"#Blocks\\\" title=\\\"1.2 Blocks\\\" />\\n                    <Anchor.Link href=\\\"#Theme\\\" title=\\\"1.3 Theme\\\" />\\n                </Anchor.Link>\\n                <Anchor.Link href=\\\"#Design\\\" title=\\\"2. Design\\\" />\\n            </Anchor>\\n        </div>\\n    );\\n};\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Anchor } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const getContainer = () => {\\n        return document.querySelector('window');\\n    };\\n    return (\\n        <div>\\n            <Anchor\\n                autoCollapse={false}\\n                getContainer={getContainer}\\n                targetOffset={60}\\n                offsetTop={100}>\\n                <Anchor.Link href=\\\"#Auto_Collapse\\\" title=\\\"1. Auto Collapse\\\">\\n                    <Anchor.Link href=\\\"#Components\\\" title=\\\"1.1 Components\\\">\\n                        <Anchor.Link href=\\\"#Avatar\\\" title=\\\"1.1.1 Avatar\\\" />\\n                        <Anchor.Link href=\\\"#Button\\\" title=\\\"1.1.2 Button\\\" />\\n                        <Anchor.Link href=\\\"#Icon\\\" title=\\\"1.1.3 Icon\\\" />\\n                    </Anchor.Link>\\n                    <Anchor.Link href=\\\"#Blocks\\\" title=\\\"1.2 Blocks\\\" />\\n                    <Anchor.Link href=\\\"#Theme\\\" title=\\\"1.3 Theme\\\" />\\n                </Anchor.Link>\\n                <Anchor.Link href=\\\"#Design\\\" title=\\\"2. Design\\\" />\\n            </Anchor>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Show Tooltip\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showTooltip\"), \" can display the title of link when it exceeds the max-width. The default value is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Anchor } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const getContainer = () => {\\n        return document.querySelector('window');\\n    };\\n    return (\\n        <div>\\n            <Anchor\\n                showTooltip={true}\\n                getContainer={getContainer}\\n                targetOffset={60}\\n                offsetTop={100}\\n            >\\n                <Anchor.Link href=\\\"#Show_Tooltip\\\" title=\\\"Tooltip is a useful tool that displays the entire content when text is abbreviated.\\\" />\\n                <Anchor.Link href=\\\"#Components\\\" title=\\\"Components\\\" />\\n                <Anchor.Link href=\\\"#Design\\\" title=\\\"Design\\\" />\\n                <Anchor.Link href=\\\"#Blocks\\\" title=\\\"Blocks\\\" />\\n                <Anchor.Link href=\\\"#Theme\\\" title=\\\"Theme\\\" />\\n            </Anchor>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Tooltip Position\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can change the Tooltip position with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"position\"), \" property. It only works when \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showTooltip\"), \" is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"true\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Anchor } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const getContainer = () => {\\n        return document.querySelector('window');\\n    };\\n    return (\\n        <div>\\n            <Anchor\\n                showTooltip={true}\\n                position={'right'}\\n                getContainer={getContainer}\\n                targetOffset={60}\\n                offsetTop={100}\\n            >\\n                <Anchor.Link href=\\\"#Tooltip_Position\\\" title=\\\"Tooltip is a useful tool that displays the entire content when text is abbreviated.\\\" />\\n                <Anchor.Link href=\\\"#Components\\\" title=\\\"Components\\\" />\\n                <Anchor.Link href=\\\"#Design\\\" title=\\\"Design\\\" />\\n                <Anchor.Link href=\\\"#Blocks\\\" title=\\\"Blocks\\\" />\\n                <Anchor.Link href=\\\"#Theme\\\" title=\\\"Theme\\\" />\\n            </Anchor>\\n        </div>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API Reference\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Anchor\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"PROPERTIES\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"INSTRUCTIONS\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"TYPE\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"DEFAULT\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"VERSION\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"autoCollapse\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Dynamically display child link\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultAnchor\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default highlight anchor\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getContainer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Scroll container\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => HTMLElement\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"window\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"maxHeight\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height of Anchor\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"750px\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"maxWidth\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width of Anchor\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"200px\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"offsetTop\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Trigger the current link switch when the scrolling content reaches a specified offset from the top of the container\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Change event\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(currentLink, previousLink) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Click event\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(event, currentLink) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"position\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Tooltip position\\uFF0Csame as \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"position\"), \" property of Tooltip component\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"railTheme\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Style of scroll rail\\uFF0Cone of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"primary\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"tertiary\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"muted\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"primary\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"scrollMotion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Animation of scroll behavior\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showTooltip\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Toggle whether to show tooltip, if passed in as object: type\\uFF0Ctype of component to show tooltip, support Tooltip and Popover, the default is Tooltip; opts, properties that will be passed directly to the component. The object form setting is provided since version 2.36.0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean \", \"|\", \" {type: 'tooltip'\", \"|\", \"'popover', opts: object}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Size of Anchor\\uFF0Cone of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Style object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"targetOffset\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Anchor offset from top of target\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.9.0\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Anchor.Link\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"PROPERTIES\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"INSTRUCTIONS\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"TYPE\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"DEFAULT\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"href\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The target of hyper link\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Style object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The content of hyper link\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Content Guidelines\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Write in sentence case\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Keep it concise and avoid line breaks\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Design Tokens\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FAQ\"), mdx(\"ol\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Why didn't my link highlight and slide to follow?\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Check whether you can scroll to the specified position by clicking the anchor:\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"No, it means there is a problem with the id. check whether the id exists in the document;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Yes, it may be that the scrolling container is not set correctly to ensure that the content of the document is wrapped in the scrolling container. The default scrolling container is window. If your container is a div of .my-container, you should set the scrolling container to this div.\")), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-text\"\n  }, \"import React from 'react';\\nimport { Anchor } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n    const getContainer = () => {\\n        return document.querySelector('.my-container');\\n    };\\n    return (\\n        <Anchor\\n            /* Other props */\\n            getContainer={getContainer}\\n        >\\n            /* Links */\\n        </Anchor>\\n    )\\n}\\n\"))))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/navigation/anchor","next":{"fields":{"slug":"zh-CN/navigation/anchor"},"id":"fc2b31c9-186e-571f-b54c-80851adfe023","frontmatter":{"title":"Anchor 锚点","localeCode":"zh-CN","icon":"doc-anchor","showNew":null}},"previous":{"fields":{"slug":"zh-CN/input/upload"},"id":"6b709805-c1e0-5639-bceb-67cd18c69ca7","frontmatter":{"title":"Upload 上传","localeCode":"zh-CN","icon":"doc-upload","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}