因此,我正在尝试为我的单页应用创建导航,该导航将平滑滚动向下到页面的一部分。
我想在页面顶部显示我的导航,其中包含链接,当用户单击链接时,这些链接可以平滑地向下滚动到页面部分。我也希望如此,例如,如果用户直接转到链接website.com/about
,它将以与单击导航组件上的about
相同的方式平滑滚动到该部分。
我了解react-router-dom
如何用于路由页面,但是我对如何使其用于特定目的感到困惑。
这是我当前拥有的代码:
function Header() {
return (
<>
<Link to="/">Hero</Link>
<Link to="/">About</Link>
<Link to="/">Contact</Link>
</>
);
}
function Hero() {
return (
<section>
<h1>Hero Section</h1>
</section>
);
}
function About() {
return (
<section>
<h1>About Section</h1>
</section>
);
}
function Contact() {
return (
<section>
<h1>Contact Section</h1>
</section>
);
}
export default function App() {
return (
<div className="App">
<BrowserRouter>
<Header />
<Hero />
<About />
<Contact />
</BrowserRouter>
</div>
);
}
我也提供了CodeSandBox,叉子很美! :)
您可以做的是使用锚标记代替Link
中的react-router-dom
,并在各节上使用id
。单击锚标记后,将元素滚动到视图中
<a
href="/"
onClick={e => {
let hero = document.getElementById("hero");
e.preventDefault(); // Stop Page Reloading
hero && hero.scrollIntoView();
}}
>
Hero
</a>
// Rest of Code
function Hero() {
return (
<section id="hero">
<h1>Hero Section</h1>
</section>
);
}
CodeSandbox here