components/scrollme.tsx

@@ -1,57 +1,9 @@
-/* import Link from "next/link"; */
+import Link from "next/link";
 import * as React from "react";
 import { SVGProps } from "react";
-import styled from "styled-components";
 
-const ScrollMeWrapper = styled.div`
-  position: absolute;
-  bottom: 6rem;
-  left: 50%;
-  color: var(--fg-faded);
-  animation-name: scrollMeAnim;
-  animation-duration: 3s;
-  animation-iteration-count: infinite;
-
-  @media only screen and (max-height: 490px) {
-    display: none;
-  }
-
-  :hover {
-    cursor: pointer;
-  }
-
-  svg {
-    width: 1.2rem;
-    height: auto;
-  }
-
-  @keyframes scrollMeAnim {
-    0% {
-      opacity: 0;
-      transform: translateY(0);
-    }
-
-    50% {
-      opacity: 1;
-    }
-
-    100% {
-      opacity: 0;
-      transform: translateY(.75rem);
-    }
-  }
-`;
-
-const ScrollMe = (props: SVGProps<SVGSVGElement> & { href: string }) => {
-  const handleScroll = () => {
-    const sectionRef = document.querySelector(props.href);
-    if (sectionRef) {
-      sectionRef.scrollIntoView({ behavior: "smooth" });
-    }
-  };
-
-  return (
-    <ScrollMeWrapper onClick={handleScroll}>
+const ScrollMe = (props: SVGProps<SVGSVGElement> & { href: string }) => (
+  <Link href={props.href}>
     <svg
       xmlns="http://www.w3.org/2000/svg"
       height="1em"
@@ -67,8 +19,7 @@ const ScrollMe = (props: SVGProps<SVGSVGElement> & { href: string }) => {
         d="m2 2 15.77 17.369a2 2 0 0 0 2.96 0L36.5 2"
       />
     </svg>
-    </ScrollMeWrapper>
+  </Link>
 );
-};
 
 export default ScrollMe;

pages/index.tsx

@@ -148,7 +148,7 @@ const Page: NextPageWithLayout = () => {
             rel="noreferrer"
           />
         </LinkList>
-	<ScrollMe href="#contact" />
+        {/*<ScrollMe href="#contact" />*/}
       </Section>
 
       <Section>

styles/globals.css

@@ -36,6 +36,7 @@
 html {
   background: var(--bg);
   scroll-behavior: smooth;
+  scroll-snap-type: y mandatory;
 }
 
 section {