reactjs 使用< a>标签向下滚动到单页react应用程序中的不同组件

oxosxuxt 于 2023-01-12 发布在 React

关注(0)|答案(2)|浏览(148)

我在用React创建一个投资组合网站。
这是一个单页网站，网站的每个部分都是自己独立的组成部分。
我的导航栏组件顶部有链接，当我点击这些链接时，我希望页面能够向下滚动到相应的部分。传统的<a href="#about">About</a>无法正常工作。我需要使用react-router-dom吗？

const App = () => {

  return (
    <div className='app'>
      <Navbar />
      <Hero />
      <About />
      <Projects />
      <Footer />
    </div>
  )
}

export default App

reactjs

来源：https://stackoverflow.com/questions/75078586/use-a-tag-to-scroll-down-to-a-differnet-component-in-single-page-react-app

2条答案

按热度按时间

4c8rllxm1#

你可以使用refs来滚动页面到一个部分。react中的Refs有很多应用，你可以在react官方页面上阅读详细信息。下面是一个使用refs来滚动页面的例子

const Scroll = () => {
       const scrollTo = useRef();
       return (
           <div>
           <button onClick = {()=>{scrollTo.current.scrollIntoView()}></button>
             .
             .
             // Your Other divs
             .
             .
             <div ref={scrollTo}>Scrolled</div>
           </div>
       );
    }

可以使用window.scroll（）将页面滚动到一个坐标

window.scroll({top:600,left:50,behavior:'smooth'})

赞(0）回复(0）举报 2023-01-12

n1bvdmb62#

不知道我做错了什么，但正如Drew在他的回答中所建议的，经典的<a>标记确实如预期的那样工作。
继续使用这些标签，各位React开发者！

赞(0）回复(0）举报 2023-01-12

我来回答

reactjs 使用< a>标签向下滚动到单页react应用程序中的不同组件

2条答案

相关问题

热门标签

最新问答