我正在尝试设置一个单页React Web 应用程序。我的应用程序只有一个页面,所有组件都一个接一个放置,因此,让您仅呈现应用程序的某些部分的常见 react-router 解决方案对我不起作用。
目的是只有一页(尽可能大),用户可以通过菜单(或类似菜单)在页面上的各个部分之间导航。此外,该站点应该识别何时有人键入 URL http://url.com/#section4
,并自动滚动到请求的部分,将菜单上的选定部分标记为活动。
此外,如果 URL 可以根据页面滚动而改变,那将会很棒。
我怎样才能做到这一点?
我发现这个库与 React Router 的 BrowserRouter 一起工作,并允许有一个基于锚点导航,还可以自定义滚动功能,如果你可以放置偏移量或任何你想要的东西。像这样的东西:
<NavHashLink to="#anchor1" scroll={el => this.scroll(el)}>Anchor1</NavHashLink>
scroll (el) {
const offset = document.getElementById('element').offsetHeight
window.scrollTo({ top: el.offsetTop - offset, left: 0, behavior: 'smooth' })
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句