如何使用锚标记跳转到网页的特定部分？

Question

ReactJS在URL中使用“＃”，所以当我写道：Append (L1, L2) * / \ / \ * * / \ / \ * * * 4 / \ / \ / \ 1 2 3 4 1 * / \ 2 3 它不能用作滚动到具有id：specificAreaId的元素。相反，它导航到另一个页面。有人可以给我这个想法吗？

Answer 1

您是否按照指定https://www.w3.org/MarkUp/1995-archive/Elements/A.html

的方式创建锚点

Answer 2

您可以使用react-scrollable-anchor

安装它：

npm install --save react-scrollable-anchor

并将其导入您的组件：

import ScrollableAnchor from 'react-scrollable-anchor'

然后使用它：

    <a href='#myScrollSection'> Go to myScrollSection </a>
    <ScrollableAnchor id={'myScrollSection'}>
      <div> Hello World </div>
    </ScrollableAnchor>

您可以阅读更多here

Answer 3

我假设您在hash history中使用react-router。您可以尝试使用browser history吗？

如果您创建锚标记，那么它也是理想的：

<a href="pageUrl#specificAreaId" >Click here to scroll to top</a>

您也可以参考这篇文章，关于类似的问题：

Use anchors with react-router

Answer 4

您可以尝试'jquery animate scrollTop'。

$('html, body').animate({
  scrollTop: $('#specificAreaId').offset().top
}, 800);