I have a nav bar, it the nav bar I have some links. when I click on one of the links I want to jump to a specific part of the page.

I tried to implement the 'jumping motion' for the "pricing" button. here is the nav bar code::

const NavigationBar = () => {
  // fix: how to send the user to a part of a page when the click something in the header?
  return (
    <>
      <Navbar bg="dark" fixed="top" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Bowsky</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
    </>
  );
};

here is the code for the pricing component::

const Grid = () => {
  const caroselData = [
    {
      imgSrc: "https://picsum.photos/900/400",
      title: "title 1",
      description: "description 1"
    },
    {
      imgSrc: "https://picsum.photos/900/400",
      title: "title 2",
      description: "description 2"
    }
  ];
  return (
    <Container style={{ paddingTop: "100px" }}>
      <SimpleCarousel data={caroselData} />
      <Features />
      <Pricing id="pricing" />
      <FrequentlyAskedQuestions />
    </Container>
  );
};

here is the code repo:: Note: the tabs to look at are 'Grid.js' and 'NavigationBar.js'

https://codesandbox.io/s/bosky-active-ow4qs7?file=/src/Components/Grid.js:231-730

I also tried to use react-scroll but I didn't have any luck either. it actually throws an error :(

CodePudding user response：

You need to ensure that the document fragment you want to link to — in your case an element in the HTML resulting from the render of <Pricing /> — has an id attribute set. Currently you're passing an id prop to the <Pricing /> react component (which doesn't actually seem to accept any props), not actually setting an HTML attribute anywhere.

You can use your browser's devtools to find the actual HTML tag you want the scroll to jump to, then you'll just need to add the proper id attribute to that element in your code.