diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index 537cb3c00c9342..621abcb5ba334b 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -32,6 +32,7 @@ import {
} from 'docs/src/modules/utils/i18n';
import DocsStyledEngineProvider from 'docs/src/modules/utils/StyledEngineProvider';
import createEmotionCache from 'docs/src/createEmotionCache';
+import BackToTop from 'docs/src/modules/components/BackToTop';
import findActivePage from 'docs/src/modules/utils/findActivePage';
import FEATURE_TOGGLE from 'docs/src/featureToggle';
@@ -247,11 +248,11 @@ export default function MyApp(props) {
return (
+
);
}
-
MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
emotionCache: PropTypes.object,
diff --git a/docs/src/modules/components/BackToTop.js b/docs/src/modules/components/BackToTop.js
new file mode 100644
index 00000000000000..1eaaf23cc95cad
--- /dev/null
+++ b/docs/src/modules/components/BackToTop.js
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import useScrollTrigger from '@mui/material/useScrollTrigger';
+import Box from '@mui/material/Box';
+import Fab from '@mui/material/Fab';
+import Tooltip from '@mui/material/Tooltip';
+import KeyboardArrowUpRoundedIcon from '@mui/icons-material/KeyboardArrowUpRounded';
+import Zoom from '@mui/material/Zoom';
+import { useTranslate } from 'docs/src/modules/utils/i18n';
+
+function BackToTop(props) {
+ const t = useTranslate();
+ const { window: windowProp, onClick, sx, ...other } = props;
+
+ const trigger = useScrollTrigger({
+ target: windowProp ? windowProp() : undefined,
+ disableHysteresis: true,
+ threshold: 100,
+ });
+
+ const handleClick = (event) => {
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+ onClick?.(event);
+ };
+
+ return (
+
+
+
+
+ `0px 4px 20px ${
+ theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(170, 180, 190, 0.3)'
+ }`,
+ }}
+ >
+
+
+
+
+
+ );
+}
+
+BackToTop.propTypes = {
+ onClick: PropTypes.func,
+ sx: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+ PropTypes.func,
+ PropTypes.object,
+ ]),
+ window: PropTypes.func,
+};
+
+export default BackToTop;
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index a5fed123a67a49..c6905183ee2aec 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -38,6 +38,7 @@
"skipToContent": "Skip to content",
"toggleSettings": "Toggle settings drawer"
},
+ "backToTop": "Scroll back to top",
"blogDescr": "A sophisticated blog page layout. Markdown support is courtesy of markdown-to-jsx but is easily replaced.",
"blogTitle": "Blog",
"bundleSize": "Bundle size",