From 5c0dbd9d2f4acd3a876cf9e38a03cf3eddd0edda Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Mon, 6 Sep 2021 14:18:59 +0700
Subject: [PATCH 1/2] :sparkles: feat: Scroll To Top

---
 .../common/ScrollToTop/ScrollTarget.tsx           | 15 ---------------
 src/components/common/ScrollToTop/ScrollToTop.tsx |  7 +++----
 2 files changed, 3 insertions(+), 19 deletions(-)
 delete mode 100644 src/components/common/ScrollToTop/ScrollTarget.tsx

diff --git a/src/components/common/ScrollToTop/ScrollTarget.tsx b/src/components/common/ScrollToTop/ScrollTarget.tsx
deleted file mode 100644
index 50a839c83..000000000
--- a/src/components/common/ScrollToTop/ScrollTarget.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { MutableRefObject } from 'react'
-
-interface ScrollTargetProps {
-    refScrollUp: MutableRefObject<HTMLDivElement>;
-}
-
-const ScrollTarget = ({ refScrollUp } : ScrollTargetProps) => {
-
-    return (
-        <div ref={refScrollUp}></div>
-    )
-
-}
-
-export default ScrollTarget
diff --git a/src/components/common/ScrollToTop/ScrollToTop.tsx b/src/components/common/ScrollToTop/ScrollToTop.tsx
index 98e16168d..d148c8937 100644
--- a/src/components/common/ScrollToTop/ScrollToTop.tsx
+++ b/src/components/common/ScrollToTop/ScrollToTop.tsx
@@ -5,11 +5,10 @@ import s from './ScrollToTop.module.scss'
 import ArrowUp from '../../icons/IconArrowUp'
 
 interface ScrollToTopProps {
-    target: MutableRefObject<HTMLDivElement>;
     visibilityHeight?: number;
 }
 
-const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => {
+const ScrollToTop = ({ visibilityHeight=450 }: ScrollToTopProps) => {
 
     const [scrollPosition, setSrollPosition] = useState(0);
     const [showScrollToTop, setShowScrollToTop] = useState("hide");
@@ -26,7 +25,7 @@ const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => {
     };
 
     function handleScrollUp() {
-        target.current.scrollIntoView({ behavior: "smooth" });
+        window.scrollTo(0, 0);
     }
 
     function addEventScroll() {
@@ -34,7 +33,7 @@ const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => {
     }
 
     useEffect(() => {
-        addEventScroll()
+        addEventScroll();
     });    
 
     return (

From e4172cf2c760d4153d8925acb56db624703c63b6 Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Mon, 6 Sep 2021 14:22:34 +0700
Subject: [PATCH 2/2] update

---
 pages/index.tsx                | 12 +++++++++---
 src/components/common/index.ts |  1 -
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 88b354335..d3c21e8ed 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,17 +1,23 @@
 import React, { MutableRefObject, useRef } from 'react';
-import { Banner, ButtonCommon, ButtonIconBuy, CollectionHeading, HeadingCommon, Inputcommon, InputSearch, Layout, ScrollTarget } from 'src/components/common';
+import { Banner, ButtonCommon, ButtonIconBuy, CollectionHeading, HeadingCommon, Inputcommon, InputSearch, Layout, ScrollToTop } from 'src/components/common';
 import { IconBuy } from 'src/components/icons';
 
 export default function Home() {
-  const refScrollUp = useRef() as MutableRefObject<HTMLDivElement>;
 
   return (
     <>
-      <ScrollTarget refScrollUp={refScrollUp} />
+      {/* <ScrollTarget refScrollUp={refScrollUp} /> */}
+      
       <HeadingCommon align="center">categories</HeadingCommon>
       <HeadingCommon type='light'>categories</HeadingCommon>
       <CollectionHeading subtitle='Lorem' title='Heading here'/>
+      <CollectionHeading subtitle='Lorem' title='Heading here'/>
+      <CollectionHeading subtitle='Lorem' title='Heading here'/>
+      <CollectionHeading subtitle='Lorem' title='Heading here'/>
+      <CollectionHeading subtitle='Lorem' title='Heading here'/>
       <HeadingCommon align="center" type='light'>categories</HeadingCommon>
+      
+      <ScrollToTop />
 
       <p>Go to <code>src/components</code> to make your awesome component!</p>
       <p>Go to <code>src/styles</code> to find global styles!</p>
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 7d9290c69..d39e1bfbd 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -11,7 +11,6 @@ export { default as Inputcommon} from './InputCommon/InputCommon'
 export { default as HeadingCommon } from './HeadingCommon/HeadingCommon'
 export { default as CollectionHeading } from './CollectionHeading/CollectionHeading'
 export { default as ScrollToTop } from './ScrollToTop/ScrollToTop'
-export { default as ScrollTarget } from './ScrollToTop/ScrollTarget'
 export { default as InputSearch} from './InputSearch/InputSearch'
 export { default as ButtonIconBuy} from './ButtonIconBuy/ButtonIconBuy'
 export { default as Banner} from './Banner/Banner'