Issues that remain scrolling when page is moved when padding-top(or margin-top) value is present in layout

[BoubleJ]

Link to the code that reproduces this issue

https://github.com/BoubleJ/scroll_test

To Reproduce

1. Go to the about page
2. Lower scrolling by approximately 50px (scrolling less than layout margin value)
3. Go to the dashboard page through the top tab

Current vs. Expected behavior

Current Behavior

1. Scroll top not moved

The scroll does not go to the top when moving the page after scrolling less than the padding value of the layout element.

Scroll.top.not.moved.mp4

2. scroll to top

If you scroll more than the padding value of the layout element and move the page, the scroll normally goes to the top.

scroll.to.top.mp4

Expected Behavior

1. I want to know why this happens.

2. How can I get the scroll to go to the top normally even if I scroll less than the layout padding area and then go to the page

3. If the layout area contains an element with a position-fixed attribute, it may be necessary to pad the layout area to show the content section at the bottom of the element.
   In this case, what should I do to move the scroll normally like video 2 when moving the page.

Provide environment information

Operating System:
  Platform: window
  Arch: x64
  Version: #1 SMP Tue June 17 21:38:13 KST 2025
Binaries:
  Node: 22.15.1
  npm: 11.4.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.3.3 // Latest available version is detected (14.2.8).
  eslint-config-next: 14.2.8
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Linking and Navigating, Route Handlers

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

[hassan524]

can i work on it ?

[BoubleJ]

can i work on it ?

Sure!

This is a link to the GitHub Repository that reproduces the issue.

https://github.com/BoubleJ/scroll_test

I forgot to attach the link. Sorry.

[hassan524]

Yeah i make a pull request check it.

[HiImSaba1]

Has anyone found a solution to this please? I am searching for days and still cannot fix it to scroll casually to top. Even the ScrollToTop(0,0) is not working anymore. Please add a comment if you find anything.

[HiImSaba1]

UPDATE: I have a found a solution that works for me. I use this packages if someone want to know:

"@studio-freight/lenis": "^1.0.42",
"@tailwindcss/vite": "^4.0.14",
"react-router-dom": "^7.4.0",

The main issue for me was: if i scroll from home page down to the footer or even a minor 50px down, when i change pages to e.g. About then the 50px or whatever value of height was to scroll down it would keep this value. Instead of taking me to the top it took me to the prev value of height scrolled. So i implemented this components: SmoothScroll.jsx (lenis) and one Layout.jsx component (custom cursor and logic scroll to top).

My SmoothScroll.jsx is like this:
import React, { useEffect } from "react"; import Lenis from "@studio-freight/lenis"; let lenisInstance = null; export const getLenis = () => lenisInstance; const SmoothScroll = ({ children }) => { useEffect(() => { lenisInstance = new Lenis({ duration: 1.6, easing: (t) => Math.min(1, 1.01 - Math.pow(2, -10 * t)), smooth: true, }); const raf = (time) => { lenisInstance.raf(time); requestAnimationFrame(raf); }; requestAnimationFrame(raf); return () => { lenisInstance.destroy(); lenisInstance = null; }; }, []); return <>{children}</>; }; export default SmoothScroll;

And the Layout.jsx (with the scroll to top logic on page transition i slike this:
import React, { useLayoutEffect } from "react"; import { useLocation } from "react-router-dom"; import { getLenis } from "./SmoothScroll"; import Cursor from "./Cursor"; const Layout = ({ children }) => { const { pathname } = useLocation(); const isDesktop = typeof window !== "undefined" && window.innerWidth > 767; useLayoutEffect(() => { console.log("Route changed", pathname); const timer = setTimeout(() => { const lenis = getLenis(); if (lenis) { // Uncomment to debug // console.log("Lenis paused?", lenis.isPaused, "stopped?", lenis.isStopped); lenis.scrollTo("top", { duration: 1.2, immediate: false, }); } }, 250); // Small delay helps ensure Lenis is ready return () => clearTimeout(timer); }, [pathname]); return ( <> <Cursor isDesktop={isDesktop} /> <div className="relative">{children}</div> </> ); }; export default Layout;

And the App.jsx should look like this:
return ( <> <Layout> <AnimatePresence mode="wait"> <Routes location={location} key={location.pathname}> <Route path="/" element={<PageTransition><Home /></PageTransition>} /> <Route path="/about" element={<PageTransition><About /></PageTransition>} /> <Route path="/work" element={<PageTransition><Work /></PageTransition>} /> <Route path="/blog" element={<PageTransition><Blog /></PageTransition>} /> <Route path="/blog/:slug" element={<PageTransition><BlogRouter /></PageTransition>} /> <Route path="/contact" element={<PageTransition><Contact /></PageTransition>} /> </Routes> </AnimatePresence> </Layout> </> ); }; const App = () => { return ( <SmoothScroll> <AppContent /> </SmoothScroll> ); }; export default App;

Is anyone asks for this problem he can refer to this code for a possible solution for the react version: "react": "^19.1.0", or "next": "^15.3.1".

Tell me if you have any questions or i missed anything.

Regards,