Next.js Discord

Discord Forum

Link not scrolling to the top

Unanswered
Common carp posted this in #help-forum
Open in Discord
Avatar
Common carpOP
Hello,

I've tried applying the fix found in https://github.com/vercel/next.js/discussions/64435#discussioncomment-9101547

But the issue still persists.

Not sure what I'm doing wrong, but I've done exactly how it is.

1 Reply

Avatar
Common carpOP
StartOnTop.tsx
"use client";

import { useEffect } from "react";
import { usePathname } from "next/navigation";

export default function StartOnTop() {
  const pathname = usePathname();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

layout.tsx
import type { Metadata } from "next";
import "./globals.css";
import localFont from "next/font/local";
import Navbar from "./components/Navbar";
import LenisWrapper from "./components/leniswrapper";
import Head from "./Head";
import Footer from "./components/Footer";
import StartOnTop from "./components/StartOnTop";
// import { CursorProvider } from "./components/CursorContext";
// import CustomCursor from "./components/CustomCursor";

const Satoshi = localFont({
  src: [
    {
      path: "./fonts/Satoshi-Variable.woff2",
      weight: "300 900",
      style: "normal",
    },
    {
      path: "./fonts/Satoshi-VariableItalic.woff2",
      weight: "300 900",
      style: "italic",
    },
  ],
  variable: "--font-satoshi",
  display: "swap",
  preload: true,
  fallback: ["serif"],
});

const Neco = localFont({
  src: [
    {
      path: "./fonts/Neco-Variable.woff2",
      weight: "400 900",
      style: "normal",
    },
    {
      path: "./fonts/Neco-VariableItalic.woff2",
      weight: "400 900",
      style: "italic",
    },
  ],
  variable: "--font-neco",
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <LenisWrapper>
      {/* <CursorProvider> */}
      <Head />
      <html lang="en" className={`${Satoshi.variable} ${Neco.variable}`}>
        <body>
          {/* <CustomCursor /> */}
          {/* <Navbar /> */}
          <StartOnTop />
          <main>{children}</main>
          <Footer />
        </body>
      </html>
      {/* </CursorProvider> */}
    </LenisWrapper>
  );
}