0
138
ViewsScroll to section in Reactjs using jQuery
I have a reactjs application with multiple component,
function App() {
return (
<main className="text-white">
<Navbar />
<About />
<Skills />
<Experience />
<Project />
<Contact />
</main>
);
}
How can I use jQuery inside navbar component to scroll to these sections?
·
Juan Pablo Isaza
2 answers
Answer question0
You don't really need JQuery. You can do this using HTML and CSS attributes. Just adapt it to the React framework.
- Give each section an ID
- Make the nav items
<a>tags - Add each section's ID as the
hrefproperty of its respective<a>tag - In the CSS add
scroll-behaviour: smoothto the<html>tag.
Example:
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> BUT...
If you really want to use JQuery you can do it like this:
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>
·
Juan Pablo Isaza
Report
Answer question