在页面加载完毕或者用户更新页面、超链接或者其他任何可以链接的标签之后，网站将无法平滑地滚动到所需的位置（低于需要的位置）。那么该如何做呢？
在页面加载完毕或用户更新页面、超链接或任何其他能够链接的标签后，网站将无法平滑地滚动到所需位置（低于需要）。
那么我该如何解决这个问题，以便即使在渲染页面之后一切仍能正常运行？
"use client";
import React from "react";
import { Link } from "react-scroll";
interface ButtonNavigationProps {
navigateTo: string;
children: React.ReactNode;
}
const ButtonNavigation: React.FC<ButtonNavigationProps> = ({
navigateTo,
children,
}) => {
return (
<Link
smooth={true}
spy={true}
isDynamic={true}
to={navigateTo}
offset={-130}
duration={650}
className="flex items-center gap-x-2 px-8 py-3"
>
{children}
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 -960 960 960"
width="24"
fill="currentColor"
>
<path d="m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z" />
</svg>
</Link>
);
};
export default ButtonNavigation;
目前，有两种情况不会发生此类滚动错误：
2）如果链接没有流畅的行为，那么从第一页渲染开始一切都会正常工作，但由于我关心流畅的行为，我找不到任何其他选项来替代它。
我知道这不是正常现象，很可能是平滑滚动错误。我还检查了页面是否已完全加载，以便我可以滚动 - 但没用。请帮助我，因为我需要尽快解决这个问题。提前谢谢！
"use client";
import React, { useState, useEffect } from "react";
import { Link } from "react-scroll";
interface ButtonNavigationProps {
navigateTo: string;
children: React.ReactNode;
}
const ButtonNavigation: React.FC<ButtonNavigationProps> = ({
navigateTo,
children,
}) => {
// State to track whether the page is fully loaded
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
// Function to set the state when the page is fully loaded
const handleLoad = () => {
setIsLoaded(true);
};
// Check if the page has already loaded
if (document.readyState === "complete") {
setIsLoaded(true); // Set to true immediately if the page is fully loaded
} else {
// If the page is not yet loaded, add an event listener to trigger once it finishes loading
window.addEventListener("load", handleLoad);
}
// Cleanup event listener when the component unmounts
return () => {
window.removeEventListener("load", handleLoad);
};
}, []); // Empty dependency array means this runs once when the component mounts
return (
<Link
smooth={true}
spy={true}
isDynamic={true}
to={navigateTo}
offset={-130}
duration={650}
className="flex items-center gap-x-2 px-8 py-3"
isDisabled={!isLoaded} // Disable smooth scrolling until the page is fully loaded
>
{children}
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 -960 960 960"
width="24"
fill="currentColor"
>
<path d="m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z" />
</svg>
</Link>
);
};
export default ButtonNavigation;