问题标签 [react-scroll]

我正在使用 React 制作单个滚动页面，并希望导航到页面的特定部分。在 HTML 中，我们使用 href 和锚标记来实现这种交互。

我找到了一个名为 react-scroll 的 React 库，但我不知道如何通过 NavBar 组件中的链接链接不同文件夹中的每个组件。我的 NavBar 有多个链接用于滚动到部分/组件。任何帮助将不胜感激！

这是添加所有组件的主页组件

我有以下源代码（React.js、React-scroll、React-bootstrap）。单击 div，跳转到特定图像标签。（在本例中，跳转到第一张图像。）

但我希望（单个）按钮按顺序跳转到图像标签。

第一次点击：跳转到第一个图片标签（page-image-1）
第二次点击：跳转到下一个图片标签（page-image-2）第三次点击：跳转到下一个图片
标签（page-image-3）
......
我想要的是。

请告诉我如何实现。

我正在构建一个使用该react-scroll库的网站，并且正在使用该Link组件来激活某些转换。我正在使用该duration属性，它在 Chrome 上运行良好，但是当我在 Firefox 上测试网站时，持续时间不会改变并且运行速度明显快于它在 Chrome 上的运行速度。这是我的代码：

我还有一个自定义button滚动到页面顶部，并且在 Firefox 中的动画速度也比在 Chrome 中快得多，没有设置持续时间：

此问题与其他动画一起影响网站的功能，但根本原因是运行所需的持续时间。

我正在构建一个react-scroll在主页上使用的 React 应用程序。我有一系列元素，它们跨越了我正在滚动div的整个视口（height: 100vh; width: 100vw当您选择任何导航箭头（向上或向下）时，窗口会平滑滚动到下一个位置，但在此过程中会出现卡顿。该问题似乎this.setState是在我的handleSectionChange方法中调用时引起的，因为将其注释掉可以解决问题，但是它也删除了更新导航箭头值所需的功能。

该handleSectionChange方法作为道具传递给另一个调用它的组件（并且是唯一调用它的方法）

handleSectionChange正如您从上面的代码中看到的那样，调用该方法的次数似乎不是问题，因为if条件将其限制为仅在更改节号时。我能够handleChangeMethod通过注释掉各种组合this.animateHomeViewNavbar的this.setHomeViewNavLinkToActive方法来查明问题，解决问题的唯一方法是注释掉该handleSectionChange方法，即使调用其他方法也是如此。然后，如前所述，handleSectionChange当我注释掉时，该方法似乎消除了问题this.setState，但这当然是功能所必需的。这也是两个适用类中唯一调用 的方法setState，因此似乎没有任何冲突。

我正在使用该react-scroll库来处理我的 React 应用程序上的滚动。每当单击特定按钮时，我都想滚动到顶部，但是我不希望它平滑滚动，这似乎是默认启用的。我已经尝试了以下代码，但是页面仍然可以顺利滚动，尽管持续时间成功更改为 2 秒。我尝试了该smooth属性的其他值，例如easeInQuart等，效果很好。我也试着加上false引号，但无济于事。

编辑：

正如 Bronson 在下面指出的，行为对window.scrollTo方法很满意。为了澄清，我想知道为什么上面的代码没有显示相同的行为，否则如果总是启用它，那么接受属性boolean值有什么意义呢？smooth

我必须为项目列表实现水平滚动，但使用后退和前进箭头按钮。以下是我实现的，但我想知道是否有另一种最好的方法来做到这一点，可能是使用 REFS。

这是我的 jsx

这可行，但我对实现不满意，因为它有 getElementById，我觉得这不是反应方式：/

注意：对于 ui，我使用的是 @material-ui/core 包

UI是这样的

**任何建议/反馈将不胜感激。

我正在尝试在导航栏中使用反应滚动，以便在单击任何导航元素时能够滚动到特定组件。

我一直在尝试遵循代码，但我似乎无法完全理解它。我在这里找到了一个很好的答案单击导航栏链接时如何滚动到特定的目标组件

但我对此有点困惑。下面是我自己的代码，我希望将其保留为函数，而不是将其更改为类：

一旦我转到 MainWebsite 组件，其中 NavBar 与其他组件坐在一起。转到 About Me 组件并将其包装在 Element 标记中，正如我复制的答案所暗示的那样。它不起作用。

我只是收到一个警告错误说

这是我的关于我

那么，我只是没有在 NavBar 组件中正确编写某些内容，以便能够在单击后滚动到其他组件吗？

第二次使用这个论坛，所以任何关于减少/创建更好问题的建议也很感激！我花了很长时间试图自己寻找答案等，但我迷路了。

我正在制作一个网站react，我想要button滚动到我网站的页脚部分。我正在使用react-scroll，它正在工作。我也material ui习惯button使用他们的Button component. 这是我的代码片段。

这可行，但唯一的问题是它仅在我单击button. 如果我单击button（在按钮内但不在文本上）中的其他任何位置，它不会滚动到页脚部分。关于我该怎么做的任何建议？谢谢。

我已经尝试了多个锚链接库以简化活动类，以便在单击导航栏时滚动到我的页面部分。使用普通的锚元素，如<a href='#content'>test</a>捕捉到具有相应 ID 的元素，但是根本没有滚动库起作用。例如，我最近的尝试，React-Scroll。这是我的导航组件（为便于阅读而简化）：

以及里面对应ID的组件：

我尝试了多个包，多种编写锚点的方法，但什么也没发生。我开始怀疑我安装的另一个包是否会干扰包的滚动功能。如果可能的话，如果有人愿意检查，我可以链接到 github repo。提前感谢您的帮助。

我在这里使用 react-scroll npm 包：https ://www.npmjs.com/package/react-scroll

按照他们的示例，我已经设置了我的代码，我可以让 onClick 函数用于滚动特定距离，但 scrollToBottom 仍然不起作用。

我的代码设置也与他们的示例略有不同，this.scrollToBottom抛出错误也是如此React.createClass。

页眉.js