0

我对前端开发有点陌生，刚刚在这个领域找到了我的第一份工作。我正在开发一个使用 React 和 Redux 构建的网站。我遇到的问题是在一个包含多个 div 部分的页面上。Navbar 中的按钮使用 React onClick-event 来获取与按钮相关的部分的 id，然后“滚动到视图”以向下滚动到该部分。这很好用，尽管我希望能够到达同一页面并从不同的页面滚动到视图中。这是导航栏按钮的示例：

<li>
  <FormattedMessage id="section.categories.funny">
    {text => (
        <button
            type="button"
                onClick={e => {
                    e.preventDefault();
                        if (document.getElementById('funny') !== null) {
                            document
                                .getElementById('funny')
                                .scrollIntoView({ block: 'start', behavior: 'smooth' });
                                }
                    }}
                >
            {text}
        </button>
    )}
  </FormattedMessage>
</li>

所以这方面的一个例子是：假设这个页面在：'url.com/categories'。当我在此 url 上按下显示“有趣”的按钮时，页面向下滚动到 id 为“有趣”的部分没问题。但我也可以在另一个页面上 - 比如说：“url.com/categories/stories” - 那里有相同的导航栏，当我按下显示“有趣”的按钮时，我想被重定向到“url.com/categories”，然后向下滚动到“有趣”部分。

我希望我的问题有意义，如果没有，请告诉我！英语不是我的母语，提出正确问题的艺术似乎在学习如何编码方面发挥了重要作用。:) 正如我所说，我对此很陌生，根本没有使用 React 或 Redux。谢谢！/乔尔

4

1 回答 1

1

我有同样的问题，我使用了React-Router-Hash-Link

import { HashLink as Link } from 'react-router-hash-link';

<Link smooth to="/some/path#with-hash-fragment">Link to Hash Fragment</Link>

Smooth 属性允许滚动元素。

于 2020-03-24T21:32:23.357 回答