crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 12:24:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: Scroll To Top

Browse Source
This commit is contained in:
sonnguyenkieio
2021-09-06 14:18:59 +07:00
parent f7359ed6f5
commit 5c0dbd9d2f
2 changed files with 3 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/common/ScrollToTop/ScrollTarget.tsx
View File

@@ -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

7
src/components/common/ScrollToTop/ScrollToTop.tsx
View File

@@ -5,11 +5,10 @@ import s from './ScrollToTop.module.scss'
import ArrowUp from '../../icons/IconArrowUp' import ArrowUp from '../../icons/IconArrowUp'
interface ScrollToTopProps { interface ScrollToTopProps {
target: MutableRefObject<HTMLDivElement>;
visibilityHeight?: number; visibilityHeight?: number;
} }
const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => { const ScrollToTop = ({ visibilityHeight=450 }: ScrollToTopProps) => {
const [scrollPosition, setSrollPosition] = useState(0); const [scrollPosition, setSrollPosition] = useState(0);
const [showScrollToTop, setShowScrollToTop] = useState("hide"); const [showScrollToTop, setShowScrollToTop] = useState("hide");
@@ -26,7 +25,7 @@ const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => {
}; };
function handleScrollUp() { function handleScrollUp() {
target.current.scrollIntoView({ behavior: "smooth" }); window.scrollTo(0, 0);
} }
function addEventScroll() { function addEventScroll() {
@@ -34,7 +33,7 @@ const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => {
} }
useEffect(() => { useEffect(() => {
addEventScroll() addEventScroll();
}); });
return ( return (