crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-21 11:51:20 +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
Show Stats 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'
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 (