基于锚点的 React Web 导航

雷尼尔·埃雷拉

我正在尝试设置一个单页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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Web上的导航react-navigation

来自分类Dev

jQuery平滑滚动锚点导航

来自分类Dev

约束到 UINavigationController 导航栏锚点

来自分类Dev

导航时自动关闭模式(单击锚点时)

来自分类Dev

导航到其他页面上的锚点

来自分类Dev

锚点导航和历史记录更改

来自分类Dev

Animating ScrollTop用于单页锚点的侧面导航

来自分类Dev

滚动到锚点后关闭导航栏

来自分类Dev

如何通过锚导航?

来自分类Dev

隐藏基于文本的锚点

来自分类Dev

用于 web 项目的 React-navigation + react-native-web,如何使用 url 导航到正确的屏幕

来自分类Dev

ACM:Web导航

来自分类Dev

React+Laravel:Nivo Slider 无法与基于 React Router 的导航一起正常工作

来自分类Dev

React Native,导航

来自分类Dev

锚导航和历史更改

来自分类Dev

使用AJAX更改div内容-如何将导航显示为哈希/锚点

来自分类Dev

在锚点上单击ng时,导航栏菜单为什么会闪烁?

来自分类Dev

如何关闭“模态”窗口并使用相同的链接自动导航到“锚点”?

来自分类Dev

为什么我的锚点无法在下拉菜单中导航?

来自分类Dev

在滚动时折叠导航,但在使用页面锚点时也开始折叠

来自分类Dev

JavaScript-调用函数并导航到HTML锚点内的位置

来自分类Dev

如何为固定的导航更改类在某些锚点之后的滚动重新计算剖面的高度?

来自分类Dev

滚动页面中其他div锚点时如何更改导航文本颜色

来自分类Dev

Bootstrap 导航栏页外(非锚点)链接不起作用,但文本中的 href 很好

来自分类Dev

带有 asp.net web.sitemap 的 Bootstrap 4 导航栏;如何去除点?

来自分类Dev

如何在React中偏移链接和锚点?

来自分类Dev

用Fluro导航(Flutter Web)

来自分类Dev

点导航定位

来自分类Dev

基于URL的主动导航

Related 相关文章

  1. 1

    Web上的导航react-navigation

  2. 2

    jQuery平滑滚动锚点导航

  3. 3

    约束到 UINavigationController 导航栏锚点

  4. 4

    导航时自动关闭模式(单击锚点时)

  5. 5

    导航到其他页面上的锚点

  6. 6

    锚点导航和历史记录更改

  7. 7

    Animating ScrollTop用于单页锚点的侧面导航

  8. 8

    滚动到锚点后关闭导航栏

  9. 9

    如何通过锚导航?

  10. 10

    隐藏基于文本的锚点

  11. 11

    用于 web 项目的 React-navigation + react-native-web,如何使用 url 导航到正确的屏幕

  12. 12

    ACM:Web导航

  13. 13

    React+Laravel:Nivo Slider 无法与基于 React Router 的导航一起正常工作

  14. 14

    React Native,导航

  15. 15

    锚导航和历史更改

  16. 16

    使用AJAX更改div内容-如何将导航显示为哈希/锚点

  17. 17

    在锚点上单击ng时,导航栏菜单为什么会闪烁?

  18. 18

    如何关闭“模态”窗口并使用相同的链接自动导航到“锚点”?

  19. 19

    为什么我的锚点无法在下拉菜单中导航?

  20. 20

    在滚动时折叠导航,但在使用页面锚点时也开始折叠

  21. 21

    JavaScript-调用函数并导航到HTML锚点内的位置

  22. 22

    如何为固定的导航更改类在某些锚点之后的滚动重新计算剖面的高度?

  23. 23

    滚动页面中其他div锚点时如何更改导航文本颜色

  24. 24

    Bootstrap 导航栏页外(非锚点)链接不起作用,但文本中的 href 很好

  25. 25

    带有 asp.net web.sitemap 的 Bootstrap 4 导航栏;如何去除点?

  26. 26

    如何在React中偏移链接和锚点?

  27. 27

    用Fluro导航(Flutter Web)

  28. 28

    点导航定位

  29. 29

    基于URL的主动导航

热门标签

归档