{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/navigation/backtop","result":{"data":{"current":{"frontmatter":{"title":"BackTop 回到顶部","order":55,"brief":null,"icon":"doc-backtop"},"fields":{"type":"navigation"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#自定义样式","title":"自定义样式"}]},{"url":"#api-参考","title":"API 参考"},{"url":"#设计变量","title":"设计变量"}]},"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\": \"zh-CN\",\n  \"order\": 55,\n  \"category\": \"导航类\",\n  \"title\": \"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  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { BackTop } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"BackTop \\u9884\\u8BBE\\u4E86\\u57FA\\u672C\\u7684\\u8FD4\\u56DE\\u6309\\u94AE\\uFF0C\\u53EF\\u4EE5\\u76F4\\u63A5\\u8C03\\u7528\\u3002\"), 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  }, \"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"BackTop \\u9884\\u8BBE\\u4E86\\u9ED8\\u8BA4\\u6837\\u5F0F\\uFF0C\\u5305\\u62EC\\uFF1A\\u8DDD\\u79BB\\u5E95\\u90E8 50px\\uFF0C\\u8DDD\\u79BB\\u53F3\\u4FA7 100px\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"box-sizing\"), \" \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"border-box\"), \"\\uFF0C\\u5185\\u5BB9\\u6C34\\u5E73\\u5C45\\u4E2D\\u3002\\u6837\\u5F0F\\u53EF\\u4EE5\\u8986\\u76D6\\u3002\"), 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 style = {\\n        display: 'flex',\\n        alignItems: 'center',\\n        justifyContent: 'center',\\n        height: 30,\\n        width: 30,\\n        borderRadius: '100%',\\n        backgroundColor: '#0077fa',\\n        color: '#fff',\\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}>\\n                <IconArrowUp />\\n            </BackTop>\\n        </div>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), 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  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), 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  }, \"\\u7C7B\\u540D\"), 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  }, \"\\u6EDA\\u52A8\\u5230\\u9876\\u90E8\\u7684\\u65F6\\u95F4\"), 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  }, \"\\u6837\\u5F0F\\u540D\"), 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  }, \"\\u8FD4\\u56DE\\u503C\\u4E3A\\u9700\\u8981\\u76D1\\u542C\\u5176\\u6EDA\\u52A8\\u4E8B\\u4EF6\\u7684\\u5143\\u7D20\\u5BF9\\u5E94 DOM \\u5143\\u7D20\\u7684\\u51FD\\u6570\"), 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  }, \"\\u51FA\\u73B0 BackTop \\u9700\\u8981\\u8FBE\\u5230\\u7684\\u6EDA\\u52A8\\u9AD8\\u5EA6\"), 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  }, \"\\u70B9\\u51FB\\u4E8B\\u4EF6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), 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  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/navigation/backtop","next":{"fields":{"slug":"en-US/navigation/breadcrumb"},"id":"3bda8e66-2240-5f71-b948-dc24221e2052","frontmatter":{"title":"Breadcrumb","localeCode":"en-US","icon":"doc-breadcrumb","showNew":null}},"previous":{"fields":{"slug":"en-US/navigation/backtop"},"id":"26802d85-3beb-56d5-afc0-9e35128bbccd","frontmatter":{"title":"BackTop","localeCode":"en-US","icon":"doc-backtop","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}