reactjs 如何使React应用滚动到新呈现页面上的特定组件，并提供其URL

k7fdbhmy 于 2023-04-29 发布在 React

关注(0)|答案(1)|浏览(126)

React应用滚动到新呈现的页面上的特定组件，前提是其URL无法使用smooth-scrollnpm。它被卡在中间到达URL中的组件。例如我有urlhttp://localhost:3000/#contact它的停止在这个中间。

APP.js：

export default function App() {
  useEffect(() => {
    if (window.location.hash) {
      let elem = document.getElementById(window.location.hash.slice(1));
      if (elem) {
        elem.scrollIntoView({ behavior: "smooth" });
      }
    } else {
      window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
    }
  }, [window.location.hash]);
 <div className="main-container"> 
   
      <Header/>
      <Home />  
      <About />
      <Blog />
      <Contact />
      <Footer />
      <ScrollToTop />
</div>
)}
contact page

 <div id="contact" className="newContact">
      <h2 style={{ marginbottom: "12px" }}>Contact us</h2>
</div>

当用户输入url时，我期望它应该转到该组件。

reactjs

来源：https://stackoverflow.com/questions/76109010/how-to-make-react-app-scroll-to-a-specific-component-on-a-newly-rendered-page-pr

1条答案

按热度按时间

ia2d9nvy1#

解决方案是使用react-scroll库
安装rect-scroll
在组件文件中从react-scroll导入Link组件：

import { Link } from "react-scroll";

将导航链接中的锚标记（）替换为“链接”组件：

<nav>
  <ul>
    <li>
      <Link to="home" smooth={true} duration={500}>
        Home
      </Link>
    </li>
    <li>
      <Link to="about" smooth={true} duration={500}>
        About
      </Link>
    </li>
    <li>
      <Link to="blog" smooth={true} duration={500}>
        Blog
      </Link>
    </li>
    <li>
      <Link to="contact" smooth={true} duration={500}>
        Contact
      </Link>
    </li>
  </ul>
</nav>

Link组件的to属性应该是目标组件的ID。
在useEffect钩子中，当URL中没有哈希值时，使用react-scroll中的scrollToTop（）函数滚动到页面顶部：

import { scrollToTop } from "react-scroll";

useEffect(() => {
  if (window.location.hash) {
    let elem = document.getElementById(window.location.hash.slice(1));
    if (elem) {
      elem.scrollIntoView({ behavior: "smooth" });
    }
  } else {
    scrollToTop({ duration: 500 });
  }
}, [window.location.hash]);

还可以将持续时间属性传递给scrollToTop（）函数，以控制滚动动画的速度。

赞(0）回复(0）举报 2023-04-29

我来回答

reactjs 如何使React应用滚动到新呈现页面上的特定组件，并提供其URL

1条答案

相关问题

热门标签

最新问答