fix: apply feedback on Go to top button [Fixes #15412]

Author: smithrashell

src/components/Footer.tsx

@@ -320,7 +320,7 @@ const Footer = ({ lastDeployLocaleTimestamp }: FooterProps) => {
         <Button
           variant="outline"
           isSecondary
-          onClick={() => scrollIntoView("top")}
+          onClick={() => scrollIntoView("div.mx-auto")}
         >
           <IoChevronUpSharp /> Go to top
         </Button>

src/components/ui/buttons/Button.tsx

@@ -105,7 +105,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     ref
   ) => {
     const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-      toId && scrollIntoView(toId)
+      toId && scrollIntoView("#" + toId)
       customEventOptions && trackCustomEvent(customEventOptions)
 
       onClick?.(e)

src/layouts/BaseLayout.tsx

@@ -51,7 +51,7 @@ export const BaseLayout = ({
        * layout on initial load.
        */}
       <SkipLink />
-      <div className="mx-auto max-w-screen-2xl" id="top">
+      <div className="mx-auto max-w-screen-2xl">
         <Nav />
 
         {/* TODO: FIX TRANSLATION BANNER LOGIC FOR https://github.com/ethereum/ethereum-org-website/issues/11305 */}

src/lib/utils/scrollIntoView.ts

@@ -1,8 +1,8 @@
 export const scrollIntoView = (
-  toId: string,
+  selector: string,
   options: ScrollIntoViewOptions = { behavior: "smooth", block: "start" }
 ): void => {
-  const element = document.getElementById(toId)
+  const element = document.querySelector(selector)
 
   if (!element) return