1

UPDATE 2: Solved. It was due to poor styling. I have a background div in my app that I had set overflow: auto; and it was stopping react-scroll from working. It wasn't even needed. I deleted it and it fixed the problem.

UPDATE: I thought it a good idea to be clearer and so I've copied my project into a codesandbox. I'm still getting the same issues in the sandbox. If anyone can see any issues, I'd sure like your help.

I'm trying to create my first portfolio page.

I'm trying to implement a smooth scroll when I click on a link in my Nav component to other components, for example this About component. I'm using react-scroll.

This is my Nav.js component.

import { Link } from "react-scroll";

const NavBar = () => {

  return (
      <div className={`${classes.navbar} ${navBarDarkLightClasses}`}>
        <Link to="about" spy={true} smooth={true} offset={50} duration={500}>
          About
        </Link>
      </div>
  );
};

export default NavBar;

And here is my About.js component that I want to link to.

const About = () => {
  return (
    <section>
      <div id="about" className={classes.image}>
        <img src={profilePhoto} alt="profile photo"/>
      </div>
    </section>
  );
};

export default About;

However. Nothing happens. When I view the html in the browser the link appears as About and includes no href as I would expect it should.

Any help greatly appreciated.

Alex Pritchard
  • 13
  • 1
  • 4
  • Hello Alex, did you manage to fix the issue? – AWIXOR May 18 '22 at 14:36
  • Yep. It was a css styling issue. I had overflow: auto which was stopping everything from working. If you hare having the same issue, i would suggest you start buy making changes to your css file – Alex Pritchard May 19 '22 at 01:50

4 Answers4

1

There's nothing wrong with your code, as far as I can see. However, maybe you have some issues with your classes and/or styling.

The link rendered shouldn't have any href. The Link component should be handling the scroll without it.

You can take a look at this working example sandbox based on your provided code. Then, maybe, you can quickly figure out the problem with your code.

crls_b
  • 580
  • 2
  • 7
  • Thank you! I suspect it could have something to do with my styling. I'm using modules. Thank you for providing this sandbox! I've take a look and see if it helps. – Alex Pritchard Feb 06 '22 at 01:40
  • Thanks for introducing me to codesandbox. i've not used it before and seems really useful. I've copied my project into a sandbox. If have time, would be great if you could give it a quick look. – Alex Pritchard Feb 06 '22 at 02:31
  • Sure, if you have any issues with that, I can take a look. I've seen that the sandbox linked in the question has some components, but they are almost empty now. Let me know if you have trouble with that react-scroll thing, and I'll try to help you. – crls_b Feb 06 '22 at 13:06
  • Seems I hadn't saved the code in the components! I've not used codesandbox before and as the code was running I just assumed it also meant it was saved. Thank you for you help! – Alex Pritchard Feb 07 '22 at 00:04
0

Changes:

  • import React from "react"; is added at the top of the files
  • Components should be imported into App.js

Example:

{root-dir}/components/navBar.js:

import React from "react";
import { Link } from "react-scroll";

const NavBar = () => {
  return (
    <div>
      <Link to="about" spy={true} smooth={true} offset={50} duration={500}>
        About
      </Link>
    </div>
  );
};

export default NavBar;

{root-dir}/components/aboutSection.js:

import React from "react";

const About = () => {
  return (
    <section>
      <div id="about">
        <img src={profilePhoto} alt="profile photo"/>
      </div>
    </section>
  );
};

export default About;

App.js:

import React, { Component } from "react";
import NavBar from "./components/navBar";
import About from "./components/aboutSection";

export default class App extends Component {
  render() {
    return (
      <>
        <NavBar />
        <About />
      </>
    );
  }
}
Pamela Sarkisyan
  • 548
  • 4
  • 9
  • Thank you for taking the time to answer my question. This was the first time I've asked a question on stackoverflow and I don't think I provided enough information. I'm using creat-react-app with React 17, so there is no need to import React to each component. I did however try your suggestion, but unfortunately it had no effect. I am also importing the components into my App.js. – Alex Pritchard Feb 06 '22 at 01:38
0

This bug is likely caused by a styling issue in CSS. I had the same challenge. In my case, the bug was from the styling in my root element, I had the following style:

html {
    height: 100vh; 
}

Everything works fine after I removed the height property. For anyone having a similar challenge, I'll recommend going through your CSS to see which rule is causing the bug.

Dennis
  • 1
0

Add name 'about' to the section to make reference so that the scroll can target it


import React from "react";

const About = () => {
  return (
    <section name="about">
      <div id="about">
        <img src={profilePhoto} alt="profile photo"/>
      </div>
    </section>
  );
};
Fasanya Abiola
  • 1