Back to TOP Button With Smooth Scroll

Hello, I created a scrolltop.tsx component and I don’t understand why I can’t click on it?

scrolltop.tsx

"use client"
import React, { useState, useEffect } from 'react';

const ScrollToTopButton = () => {
    const [isVisible, setIsVisible] = useState(false);

    const toggleVisibility = () => {
        if (window.pageYOffset > 300) {
            setIsVisible(true);
        } else {
            setIsVisible(false);
        }
    };

    const scrollToTop = () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    };

layout.tsx

import { Analytics } from '@vercel/analytics/react';

import type { Metadata } from "next";
import { Poppins } from "next/font/google";
import "./globals.css";
import Footer from '@/components/Footer';
import ScrollToTopButton from '@/components/ScrollToTopButton';




// import CookieConsentBanner from "@/components/CookieConsentBanner";


const font = Poppins(
  { subsets: ["latin"],
    weight: '400'
}
  );

export const metadata: Metadata = {
  title: "ShopiX Optimisez votre activité",
  description: "Créez, développez et faites évoluer votre entreprise",
  icons: {
    icon: '/favicon.ico',
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="fr">
      
      <body 
      
      suppressHydrationWarning={true}
      className={font.className}>
         <Analytics /> 
        {children}
        {/* <CookieConsentBanner /> */}
        <ScrollToTopButton />
        <Footer /> 
        </body>
    </html>
  );
}

You havent returned anything for the system to render?

1 Like

Sorry I didn’t understand I think the code is correct the button works when it is at the footer my steps when I am in the other sections.

You havent shown us the code for a button. We cant diagnose something without seeing it.

1 Like

I made the component here

"use client"
import React, { useState, useEffect } from 'react';

const ScrollToTopButton = () => {
    const [isVisible, setIsVisible] = useState(false);

    const toggleVisibility = () => {
        if (window.pageYOffset > 300) {
            setIsVisible(true);
        } else {
            setIsVisible(false);
        }
    };

    const scrollToTop = () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    };

    useEffect(() => {
        window.addEventListener('scroll', toggleVisibility);
        return () => {
            window.removeEventListener('scroll', toggleVisibility);
        };
    }, []);

    return (
        <>
            {isVisible && (
                <button onClick={scrollToTop} style={buttonStyle}>
                    ↑ Scroll to Top
                </button>
            )}
        </>
    );
};

// Add your button styles here
const buttonStyle: React.CSSProperties = {
    position: 'fixed',
    bottom: '20px',
    right: '20px',
    backgroundColor: '#007bff',
    color: 'white',
    border: 'none',
    borderRadius: '5px',
    padding: '10px',
    cursor: 'pointer',
};

export default ScrollToTopButton;

and then I call it here is it correct ?
layout.tsx

 return (
    <html lang="fr">
      
      <body 
      
      suppressHydrationWarning={true}
      className={font.className}>
         <Analytics /> 
        {children}
        <ScrollToTopButton />
        {/* <CookieConsentBanner /> */}
        <Footer /> 
        </body>
    </html>
  );
}

Why are you removing the event listener?

1 Like

I work with cursor and I made the component with AI.

I succeeded by calling it in app/page.tsx

On the other hand, I don’t understand why when I go for example to the contact page the NavBar is there and the links do not work, except the links where page.tsx is in the directory like /pricing/page.tsx for all the other links which are in the app directory/ nothing works.

I’ve been looking for this link problem for days.

So before you squirrel yourself down 8 other rabbitholes unrelated to the question you asked… when you say you cant click on it… is the button there but disabled somehow? Does it act like a button when you click it but doesnt do what you think it should? Does it not appear when you think it should?

1 Like

I succeeded by declaring it in app/page.tsx
On the other hand, I still have the problem of links in my footer.