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.