0

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? enter image description here

Raman
  • 27
  • 4

2 Answers2

2

A package like this can help you with that. Using Jquery or any DOM api in your React code is bad practice and you should avoid doing that.

Mehran Zahiroddini
  • 61
  • 4
0

You don't really need JQuery. You can do this using HTML and CSS attributes. Just adapt it to the React framework.

  1. Give each section an ID
  2. Make the nav items <a> tags
  3. Add each section's ID as the href property of its respective <a> tag
  4. In the CSS add scroll-behaviour: smooth to 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>
Ludolfyn
  • 1,806
  • 14
  • 20
  • thanks, but my doubt is I have all the buttons like about, contact, etc in the navbar component and I want to scroll to these components which are outside the navbar components, how this will work? – Raman Sep 13 '21 at 19:12