feat : 新增返回顶部按钮

ALITTLESEEDX · ALITTLESEEDX · commit e670f2c07aff · 2021-08-07T20:26:37.000+08:00
diff --git a/public/index.html b/public/index.html
@@ -23,5 +23,5 @@
   <body>
     <div id="root"></div>
   </body>
-  <script src="//at.alicdn.com/t/font_2728508_l8by2j35n3r.js"></script>
+  <script src="//at.alicdn.com/t/font_2728508_6p9v1vaetjp.js"></script>
 </html>
diff --git a/src/Layout/index.tsx b/src/Layout/index.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
+import Back from '@/components/BackToTop';
 import styles from './index.less';
 interface AppProps {
   children: React.ReactNode;
@@ -10,6 +11,7 @@ const Layout: React.FC<AppProps> = ({ children }) => {
     <>
       <Header />
       <main className={styles.main}>{children}</main>
+      <Back />
       <Footer />
     </>
   );
diff --git a/src/components/BackToTop/index.less b/src/components/BackToTop/index.less
@@ -0,0 +1,26 @@
+.backBtn {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  background: #f7f8fb;
+  background: var(--light-bg-color);
+  border-radius: 3px;
+  padding: 8px;
+  color: #1a202b;
+  color: var(--text-color-dark);
+  opacity: 0;
+  transition: all 0.25s;
+  &:focus {
+    color: #1a202b;
+    color: var(--text-color-dark);
+    color: #fff;
+    color: var(--white);
+  }
+  &.show {
+    opacity: 1;
+  }
+  &:hover {
+    background-color: var(--theme-color);
+    color: var(--white);
+  }
+}
diff --git a/src/components/BackToTop/index.tsx b/src/components/BackToTop/index.tsx
@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import cs from 'classnames';
+import IconFont from '@/components/IconFont';
+import getScroll from '@/utils/scroll';
+import addEventListener from 'rc-util/lib/Dom/addEventListener';
+import styles from './index.less';
+import scroll from '@/utils/scrollTo';
+const index = () => {
+  const [visible, setVisible] = useState(true);
+  const ref = React.createRef<HTMLDivElement>();
+  const scrollEvent = React.useRef<any>();
+
+  const getDefaultTarget = () =>
+    ref.current && ref.current.ownerDocument ? ref.current.ownerDocument : window;
+
+  const handleScroll = (e: React.UIEvent<HTMLElement> | { target: any }) => {
+    const scrollTop = getScroll(e.target, true);
+    setVisible(scrollTop > 400!);
+  };
+
+  const bindScrollEvent = () => {
+    const getTarget = getDefaultTarget;
+    const container = getTarget();
+    scrollEvent.current = addEventListener(container, 'scroll', (e: React.UIEvent<HTMLElement>) => {
+      handleScroll(e);
+    });
+    handleScroll({
+      target: container,
+    });
+  };
+
+  useEffect(() => {
+    bindScrollEvent();
+    return () => {
+      if (scrollEvent.current) {
+        scrollEvent.current.remove();
+      }
+      (handleScroll as any).cancel();
+    };
+  }, [window]);
+
+  return (
+    <div>
+      <a
+        className={cs(styles.backBtn, visible && styles.show)}
+        onClick={() => {
+          scroll(0);
+        }}
+      >
+        <IconFont type="#icon-fanhuidingbu" />
+      </a>
+    </div>
+  );
+};
+
+export default index;
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -6,7 +6,7 @@ import Menus from '../Menu';
 const Header: React.FC = () => {
   const [theme, setTheme] = useState('light');
   const [visible, setVisible] = useState<boolean>(true);
-  const [mobileMenu, setMobileMenu] = useState(false);
+  const [collapse, setCollapse] = useState(true);
   const [scroll, setScroll] = useState(0);
   function handleTheme() {
     if (document.documentElement.dataset.theme === 'light') {
@@ -36,7 +36,7 @@ const Header: React.FC = () => {
       setVisible(true);
     } else {
       setVisible(false);
-      setMobileMenu(false);
+      setCollapse(true);
     }
     setTimeout(function () {
       topValue = scrollTop;
@@ -55,12 +55,12 @@ const Header: React.FC = () => {
         <div className={styles.container}>
           <div className={styles.title}>Litle Seed</div>
           <div className={styles.headerRight}>
-            <Menus mobileMenu={mobileMenu} />
+            <Menus collapse={collapse} />
             <IconFont onClick={handleTheme} type={theme === 'light' ? '#icon-moon' : '#icon-sun'} />
             <IconFont
-              type="#icon-menu3"
+              type={collapse ? '#icon-menu3' : '#icon-close1'}
               onClick={() => {
-                setMobileMenu(!mobileMenu);
+                setCollapse(!collapse);
               }}
             />
           </div>
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
@@ -6,15 +6,14 @@ import classnames from 'classnames/bind';
 import { routeConfigType } from '@/typings/Menu';
 
 const cx = classnames.bind(styles);
-const Menus: React.FC = ({ mobileMenu }: any) => {
-  console.log(mobileMenu);
+const Menus: React.FC = ({ collapse }: any) => {
   const history = useHistory();
   const location = useLocation();
   function handleClick(item: routeConfigType) {
     history.push(item.path);
   }
   return (
-    <nav className={cx('navWrap', { show: mobileMenu })}>
+    <nav className={cx('navWrap', { show: !collapse })}>
       <ul className={styles.navList}>
         {RouteConfig.map((item, index) => {
           return (
diff --git a/src/utils/scroll.ts b/src/utils/scroll.ts
@@ -0,0 +1,27 @@
+export function isWindow(obj: any) {
+  return obj !== null && obj !== undefined && obj === obj.window;
+}
+
+export default function getScroll(
+  target: HTMLElement | Window | Document | null,
+  top: boolean,
+): number {
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+  const method = top ? 'scrollTop' : 'scrollLeft';
+  let result = 0;
+  if (isWindow(target)) {
+    result = (target as Window)[top ? 'pageYOffset' : 'pageXOffset'];
+  } else if (target instanceof Document) {
+    result = target.documentElement[method];
+  } else if (target) {
+    result = (target as HTMLElement)[method];
+  }
+  if (target && !isWindow(target) && typeof result !== 'number') {
+    result = ((target as HTMLElement).ownerDocument || (target as Document)).documentElement?.[
+      method
+    ];
+  }
+  return result;
+}
diff --git a/src/utils/scrollTo.ts b/src/utils/scrollTo.ts
@@ -0,0 +1,46 @@
+import raf from 'rc-util/lib/raf';
+import getScroll, { isWindow } from './scroll';
+
+interface ScrollToOptions {
+  /** Scroll container, default as window */
+  getContainer?: () => HTMLElement | Window | Document;
+  /** Scroll end callback */
+  callback?: () => any;
+  /** Animation duration, default as 450 */
+  duration?: number;
+}
+
+function easeInOutCubic(t: number, b: number, c: number, d: number) {
+  const cc = c - b;
+  t /= d / 2;
+  if (t < 1) {
+    return (cc / 2) * t * t * t + b;
+  }
+  // eslint-disable-next-line no-return-assign
+  return (cc / 2) * ((t -= 2) * t * t + 2) + b;
+}
+export default function scrollTo(y: number, options: ScrollToOptions = {}) {
+  const { getContainer = () => window, callback, duration = 450 } = options;
+  const container = getContainer();
+  const scrollTop = getScroll(container, true);
+  const startTime = Date.now();
+
+  const frameFunc = () => {
+    const timestamp = Date.now();
+    const time = timestamp - startTime;
+    const nextScrollTop = easeInOutCubic(time > duration ? duration : time, scrollTop, y, duration);
+    if (isWindow(container)) {
+      (container as Window).scrollTo(window.pageXOffset, nextScrollTop);
+    } else if (container instanceof HTMLDocument || container.constructor.name === 'HTMLDocument') {
+      (container as HTMLDocument).documentElement.scrollTop = nextScrollTop;
+    } else {
+      (container as HTMLElement).scrollTop = nextScrollTop;
+    }
+    if (time < duration) {
+      raf(frameFunc);
+    } else if (typeof callback === 'function') {
+      callback();
+    }
+  };
+  raf(frameFunc);
+}
