{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/navigation/backtop","result":{"data":{"current":{"frontmatter":{"title":"BackTop","order":55,"brief":null,"icon":"doc-backtop"},"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":"#customized-style","title":"Customized Style"}]},{"url":"#api-reference","title":"API Reference"},{"url":"#design-tokens","title":"Design Tokens"}]},"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\": 55,\n  \"category\": \"Navigation\",\n  \"title\": \"BackTop\",\n  \"subTitle\": \"BackTop\",\n  \"icon\": \"doc-backtop\"\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 { BackTop } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Basic Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"BackTop can be used directly with the default styles.\"), 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 { BackTop } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <span>Scroll down to see the bottom-right gray button.</span>\\n        <BackTop />\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Customized Style\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The default styles for BackTop component could be overwritten.\"), 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 { BackTop } from '@douyinfe/semi-ui';\\nimport { IconArrowUp } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const target = () => {\\n        return document.querySelector('.scroll-wrapper');\\n    };\\n\\n    const style = {\\n        height: 30,\\n        width: 30,\\n        borderRadius: '100%',\\n        backgroundColor: '#0077fa',\\n        color: '#fff',\\n        paddingTop: 5,\\n        bottom: 100,\\n    };\\n\\n    return (\\n        <div>\\n            <span>\\n                Scroll down to see the bottom-right <span style={{ color: '#0077fa' }}>blue circular</span> button.\\n            </span>\\n            <BackTop style={style} target={target}>\\n                <IconArrowUp />\\n            </BackTop>\\n        </div>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API Reference\"), 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  }, \"duration\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Time used to scroll to the top.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"450\")), 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\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"target\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"A function that returns the DOM element to add listener to its scrolling event.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => any\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => window\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"visibilityHeight\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The scrolling heights to be reached in order to show up BackTop.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"400\")), 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  }, \"The callback to onClick event.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: MouseEvent) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Design Tokens\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/navigation/backtop","next":{"fields":{"slug":"zh-CN/navigation/backtop"},"id":"634b085e-0f84-55bf-a711-85632aa6f2a2","frontmatter":{"title":"BackTop 回到顶部","localeCode":"zh-CN","icon":"doc-backtop","showNew":null}},"previous":{"fields":{"slug":"zh-CN/navigation/anchor"},"id":"fc2b31c9-186e-571f-b54c-80851adfe023","frontmatter":{"title":"Anchor 锚点","localeCode":"zh-CN","icon":"doc-anchor","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}