React.js: How can I jump to different links smoothly when clicked on them?

user_13380481 0
Viewed 214

I have a navigation bar with several links and I would like to be able to bring a visitor to the dedicated component smoothly when clicking on one of the navigation items. All the components are below the navigation bar as I scroll through the app. I know how it can be simply done with just HTML and CSS when a static website is built, but as I tried to do the same way in React, it obviously did not work. Is it possible to do with just React, not using any packages (React Router, react-scroll etc.)? If so, how can I do it?

For reference with just HTML and CSS: https://codesandbox.io/s/objective-ganguly-fzqnrz?file=/index.html

This is what I would like to be able to do, but with a smooth transition and without packages. Here is the code:

Navigation.js (the href's are just placeholders to illustrate the idea)

const Navigation = () => {

  return (
    <header>
      <nav>
        <ul>
          <li>
            <a href="#home">Home</a>
          </li>
          <li>
            <a href="#projects">Projects</a>
          </li>
          <li>
            <a href="#contact">Contact</a>
          </li>
        </ul>
      </nav>
    </header>
  );
};

export default Navigation;

About.js

const About = () => {

  return (
    <div>
      <div>
        <p>
          {/* Content here... */}
        </p>
      </div>
    </div>
  );
};

export default About;
reactjs javascript
1 Answers

It is not something to do with React, it's just the behavior of html and css which you have to make some tweaks to see the smooth behavior, something like this:

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* here is what you need to add to your code */
html {
  scroll-behavior: smooth;
}

#navigation {
  background-color: rgb(101, 255, 55);
}

#navbar {
  margin: 0 auto;
  height: 60px;
}

ul {
  list-style-type: none;
  overflow: hidden;
  float: right;
}

li {
  float: left;
  font-size: 20px;
  margin-left: 10px;
}

li a {
  display: block;
  color: #000;
  text-align: center;
  padding: 18px 18px;
  border-radius: 20px;
  text-decoration: none;
}

li a:hover {
  color: #232cfa;
}

#content {
  width: 100%;
  height: 500px;
  background-color: aqua;
}

#content-2 {
  height: 200px;
  background-color: salmon;
}

#footer {
  height: 100px;
  background-color: aquamarine;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Navigation Redirect</title>
  </head>
  <body>
    <header id="navigation">
      <nav id="navbar">
        <ul>
          <li>
            <a href="#content">Content 1</a>
          </li>
          <li>
            <a href="#content-2">Content 2</a>
          </li>
          <li>
            <a href="#footer">Footer</a>
          </li>
        </ul>
      </nav>
    </header>

    <div id="content">
      <h1>Content</h1>
    </div>
    <div id="content-2">
      <h2>Content 2</h2>
    </div>
    <footer id="footer">
      <h3>Footer</h3>
    </footer>
  </body>
</html>

if you want to see the sandbox code check this link: https://codesandbox.io/s/festive-cdn-t2jzgf?file=/index.html:0-844

and if you want to work with elements ref in React you can use it this way

element.scrollIntoView({behavior: "smooth"});

Based on your file structure this might be a little harder to pass around the refs to your Navigation components, so I suggest go with the CSS way

user_114321020
Related