使用jQuery滚动到Reactjs中的部分[重复]
Posted
技术标签:
【中文标题】使用jQuery滚动到Reactjs中的部分[重复]【英文标题】：Scroll to section in Reactjs using jQuery [duplicate] 【发布时间】：2021-11-08 11:23:10 【问题描述】：我有一个包含多个组件的 reactjs 应用程序，
function App()
return (
<main className="text-white">
<Navbar />
<About />
<Skills />
<Experience />
<Project />
<Contact />
</main>
);
如何在导航栏组件中使用 jQuery 滚动到这些部分？
【问题讨论】：
【参考方案1】：像this 这样的包可以帮助你。在你的 React 代码中使用 Jquery 或任何 DOM api 是不好的做法，你应该避免这样做。
【讨论】：
【参考方案2】：您实际上并不需要 JQuery。您可以使用 html 和 CSS 属性来执行此操作。只需将其适应 React 框架即可。
-
为每个部分指定一个 ID
制作导航项目
<a>标签
将每个部分的 ID 添加为其各自 <a> 标记的 href 属性
在 CSS 中，将 scroll-behaviour: smooth 添加到 <html> 标记中。
例子：
html
scroll-behavior: smooth;
height: 2600px;
overflow: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
p
margin: 200px 0;
<div>
<a href="#about">About</a>
<a href="#skills">Skills</a>
</div>
<div>
<p id="about">This is about text</p>
<p id="skills">This is skills text</p>
</div> 但是...
如果你真的想使用 JQuery，你可以这样做：
function scrollToSection(sectionID)
$('html, body').animate(
scrollTop: $(sectionID).offset().top
, 400);
html
height: 2600px;
overflow: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
.btn
display: inline-block;
cursor: pointer;
color: blue;
text-decoration: underline;
p
margin: 200px 0;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="btn" onclick="scrollToSection('#about')">About</div>
<div class="btn" onclick="scrollToSection('#skills')">Skills</div>
</div>
<div>
<p id="about">This is about text</p>
<p id="skills">This is skills text</p>
</div>【讨论】：
谢谢，但我怀疑导航栏组件中有关于、联系等所有按钮，我想滚动到导航栏组件之外的这些组件，这将如何工作？以上是关于使用jQuery滚动到Reactjs中的部分[重复]的主要内容，如果未能解决你的问题，请参考以下文章