Skip to Content
FrontendBundlesComponentsFeedback & DisplayScroll To Top

Scroll To Top

A floating action button that appears in the bottom-right corner once the user has scrolled past a threshold. Clicking it scrolls smoothly back to the top of the page.

Import

import { ScrollToTop } from "@phpcreation/frontend-components-react-nextjs-bundle/components/ScrollToTop";

Props

PropTypeRequiredDefaultDescription
thresholdnumber—300Pixels scrolled before the button appears
classNamestring——Additional CSS classes
smoothboolean—trueUse smooth scroll behavior
queryStringSupportboolean—trueAlso trigger scroll when ?scrollTo=top is in the URL

Usage

import { ScrollToTop } from "@phpcreation/frontend-components-react-nextjs-bundle/components/ScrollToTop";
 
// Place at the root layout level
export default function Layout({ children }) {
  return (
    <>
      {children}
      <ScrollToTop />
    </>
  );
}
 
// Custom threshold and no smooth scroll
<ScrollToTop threshold={500} smooth={false} />

With queryStringSupport={true}, navigating to any URL with ?scrollTo=top will automatically trigger the scroll-to-top action. Useful for “back to top” links in emails or external pages.

Last updated on
Page LoaderStepper