经过思考我的问题，我认为我是过度工程的解决方案，所以我做了什么我创建了另一个页面称为faqs下的页面目录和它的内容是相同的着陆页和执行滚动行为

import DefaultLayout from "@Components/DefaultLayout";
import {
  JoinCommunity,
  LandingBanner,
  MixMatch,
  OnlinePresence,
  LandingFaqs,
} from "@Components/LandingPage";
import { NextPage } from "next";
import { RIA } from "@Constants/acl";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import withGuard from "@Hocs/withGuard";
import { SocialProfileJsonLd } from "next-seo";
import { generatePageSeo, getFullURL } from "@Utils/Seo";
import { createRef, useEffect, useLayoutEffect, useRef } from "react";
interface Props {
  ACL: {
    action: string;
  };
}
const LandingPage: NextPage<Props> = () => {
  const { locale, asPath } = useRouter();
  const { t } = useTranslation("common");
  const completeURL = getFullURL(asPath, locale);
  const faqsRef = useRef(null);
  useLayoutEffect(() => {
    if (faqsRef.current) {
      console.log("scrolling to faqs", faqsRef.current);
      faqsRef.current.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
    }
  }, []);
  return (
    <DefaultLayout
      showFooter
      showLandingNav
      fullWidth
      seoData={generatePageSeo(
        t("seo-landing-title"),
        locale,
        asPath,
        `${t("reach-link-head")} | %s`,
        t("seo-landing-desc"),
      )}
    >
      <LandingBanner />
      <OnlinePresence />
      <MixMatch />
      <JoinCommunity />
      <div ref={faqsRef}>
        <LandingFaqs />
      </div>
    </DefaultLayout>
  );
};
LandingPage.getInitialProps = async () => {
  return {
    ACL: {
      action: RIA,
    },
  };
};
export default withGuard(LandingPage);