javascript - 滚动到锚点位置，同时考虑到固定标题，当新导航到带有哈希的 url 时

Question

演示：https ://6vk5zm231k.codesandbox.io/

我有一个基本的反应应用程序，其标题为 100 像素，并且很少有链接可以滚动到相应的锚部分。我正在使用“react-scroll”，它按预期工作，因为它有一个名为“offest”的道具。

问题出在初始页面加载上，如果我使用 url 中的哈希导航（https://6vk5zm231k.codesandbox.io/#home、https://6vk5zm231k.codesandbox.io/#about等），我会到达在没有偏移的部分考虑菜单高度。单击菜单中的链接将修复它，因为 react-scroll 完成了它的工作，但我不确定如何处理初始页面加载。

标签： javascriptreactjsscrollview

Answer 1

它有点脏，但是当 componentDidMount() 触发时，您可以强制滚动到所需的组件。这是固定滚动的项目的分支：https ://codesandbox.io/s/1owj7yqm33