Browse Source

(fix) scroll flashing, scroll to top on page nav

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>
pull/1/head
Muthu Kumar 3 years ago
parent
commit
d6fb2e4209
Signed by: mkrhere GPG Key ID: 3FD688398897097E
  1. 7
      src/components/Container.tsx
  2. 1
      src/index.css

7
src/components/Container.tsx

@ -46,11 +46,14 @@ const Container: React.FunctionComponent<{
!child || typeof child === "string" !child || typeof child === "string"
? child ? child
: React.cloneElement(child, { : React.cloneElement(child, {
style: { opacity: 0, marginBottom: "5rem", transition: "all 300ms" }, style: { opacity: 0, transform: "translateY(3rem)", transition: "all 300ms" },
}), }),
); );
useEffect(() => { useEffect(() => {
// scroll back to top when new page is loaded
window.scrollTo({ top: 0 });
if (highlightCircle.current) { if (highlightCircle.current) {
highlightCircle.current.classList.add(flash); highlightCircle.current.classList.add(flash);
timer(() => highlightCircle.current && highlightCircle.current.classList.remove(flash), 1500); timer(() => highlightCircle.current && highlightCircle.current.classList.remove(flash), 1500);
@ -69,7 +72,7 @@ const Container: React.FunctionComponent<{
containerChildren.forEach((child, idx) => { containerChildren.forEach((child, idx) => {
timer(() => { timer(() => {
child.style.removeProperty("opacity"); child.style.removeProperty("opacity");
child.style.removeProperty("margin-bottom"); child.style.removeProperty("transform");
}, 100 * idx); }, 100 * idx);
}); });

1
src/index.css

@ -10,6 +10,7 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
scroll-behavior: smooth;
} }
body { body {

Loading…
Cancel
Save