Question

我想基于用户单击的某些按钮或锚点来滚动主页中的不同部分，但是我尝试了以下库：react-scrollable-anchor，React Anchor Link Smooth Scroll和React Anchor Link Smooth Scroll，但是没有他们中的正常工作。当我单击它时，最多可以使他们跳到特定部分。不知道我做错了什么，还是库都坏了？

即使我只是使用其组件设置了简单的锚点，我仍然遵循所有他们的npm示例，但是它仍然无法正常工作。

如果我将<ScrollableAnchor id={'section1'}></ScrollableAnchor>用作react-scrollable-anchor，我可以看到我的URL包含ID名称为hash的哈希，但是没有任何反应。我必须使用<section>而不是<ScrollableAnchor>，这与React Anchor Link Smooth Scroll相同。

以下是我的设置：

const dots = [
{ className: 'navDots', name: 'Welcome', section: "#welcome", num: '1', to:"#welcome"},
{ className: 'navDots', name: 'Artists', section: "#artists", num: '2', to:"#artistsSections"}]

<div className="dots-group">
   {dots.map((dot) => (
       <span className={dot.className} key={dot.name}>
             {/* <a href={dot.section}> go </a> */}
             <AnchorLink href={dot.section}>go</AnchorLink>

             {/* <NavItem eventKey={dot.num} href={dot.section}>{dot.name}</NavItem> */}
             </span>
        ))}
 </div>

<section id={'welcome'}>
    <Welcome />
</section>
<section id={'artists'}>
    <HomepageArtists />
</section>

react-scrollable-anchor和React Anchor Link平滑滚动npm无法正常工作了吗？

0 个答案: