Scroll to other component in reactjs

Question

Here's the code:

ComponentA.js The button is in this component

import React from "react";
import { Container, Button, Typography } from "@material-ui/core";

const ComponentA = () => {
  return (
    <Container style={{ border: "1px solid red" }}>
      <Typography variant="h6">
        Suspendisse aliquet sed turpis ut tristique. Aenean ullamcorper tellus
        mollis dui tincidunt, et tristique tellus malesuada. Vivamus vel ipsum
        et justo bibendum tincidunt id vitae massa. Integer efficitur tristique
        dolor, vitae luctus felis malesuada sed. Quisque mattis aliquet
        faucibus. Aenean erat purus, sodales sit amet mollis eget, vehicula a
        sapien. Nulla sit amet mauris quis ligula consequat aliquam. Maecenas
        vitae lectus nec veli
      </Typography>
      <Button variant="outlined" size="large" color="primary">
        Hello
      </Button>
    </Container>
  );
};

export default ComponentA;

ComponentB.js Just some component with code inside

import React from "react";
import { Container, Button, Typography } from "@material-ui/core";

const ComponentB = () => {
  return (
    <Container>
      <Typography variant="h6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor
        felis vel odio laoreet luctus. Integer id tempus arcu, sollicitudin
        maximus augue. Mauris porttitor feugiat mattis. Praesent mattis neque a
        risus volutpat, sit amet sodales tortor efficitur. In pharetra nunc ac
        sem mattis pretium. Sed vitae efficitur magna. Quisque nec tellus vel
        elit vulputate imperdiet. Donec auctor nunc ut varius cursus.
        Suspendisse potenti. Sed sit amet feugiat lectus. Ut sit amet turpis vel
        ex egestas efficitur pellentesque et purus. Proin congue velit lectus,
        eu ullamcorper magna dignissim sed. Curabitur vitae neque a ipsum
        eleifend tempor. Ut nec turpis interdum, dictum lorem id, porttitor
        sapien. Integer finibus interdum orci eget pharetra. Sed a metus sed
        erat tristique posuere. Pellentesque in ultricies tortor. Fusce posuere
        purus sem, eget posuere dolor lacinia id. Integer tortor leo,
        condimentum sed maximus non, semper et felis. Etiam blandit lacus eget
        ante placerat blandit. Interdum et malesuada fames ac ante ipsum primis
        in faucibus. Maecenas pulvinar in felis vitae placerat. Maecenas
        ultrices ex ac quam accumsan aliquam. Phasellus sit amet est finibus,
        cursus tellus sit amet, ultrices felis. Morbi a cursus odio. Mauris et
        egestas ante. Morbi lobortis lectus dignissim lacus fermentum congue.
        Vivamus at libero at nisi laoreet consequat sit amet id dolor. Nullam
        venenatis dictum nulla, eget fermentum felis congue et. Cras vehicula,
        odio nec finibus feugiat, libero urna viverra augue, sed mollis tortor
        felis eu lacus.
      </Typography>
    </Container>
  );
};

export default ComponentB;

ComponentC.js The container I want to see when I clicked the button in ComponentA

import React from "react";
import { Container, Button, Typography } from "@material-ui/core";

const ComponentC = () => {
  return (
    <Container style={{ backgroundColor: "blue" }}>
      <Typography variant="h6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor
        felis vel odio laoreet luctus. Integer id tempus arcu, sollicitudin
        maximus augue. Mauris porttitor feugiat mattis. Praesent mattis neque a
        risus volutpat
      </Typography>
    </Container>
  );
};

export default ComponentC;

App.js

import "./styles.css";
import ComponentA from "./components/ComponentA";
import ComponentB from "./components/ComponentB";
import ComponentC from "./components/ComponentC";
export default function App() {
  return (
    <>
      <ComponentA />
      <ComponentB />
      <ComponentC />
    </>
  );
}

My problem: This is not my original code but the structure is similar to what I posted. I have a button in the first component and what I want is it will scroll down to the last component. Is there a way that I can implement it? I also want it to have smooth-scroll when scrolling down to the last component. Thank you for your help.

Here's the link for the codesandbox

see this question https://stackoverflow.com/questions/43441856/how-to-scroll-to-an-element — Mahdi Ta'ala, Feb 22 '21 at 13:53

score 1 · Accepted Answer · answered Feb 22 '21 at 14:44

Here's the solution I found using createRef()

App.js (This is the parent component) As you can see here the scrollDiv is declared and passed to the component I want to see when I clicked the button and the scrollSmoothHandler is passed to the component where the button resides.

import "./styles.css";
import React, { Component, createRef } from "react";
import ComponentA from "./components/ComponentA";
import ComponentB from "./components/ComponentB";
import ComponentC from "./components/ComponentC";
export default function App() {
  const scrollDiv = createRef();
  const scrollSmoothHandler = () => {
    scrollDiv.current.scrollIntoView({ behavior: "smooth" });
  };
  return (
    <>
      <ComponentA toScroll={scrollSmoothHandler} />
      <ComponentB />
      <ComponentC scrollDiv={scrollDiv} />
    </>
  );
}

For the ComponentA.js (just passed the scrollSmoothHandler to the onClick function of the button)

<Button variant="outlined" size="large" color="primary" onClick={toScroll}>
  Hello
</Button>

For my ComponentC.js (This is the Container I want to see when the button is clicked). As you can see, the ref is added to the Container

import React, { forwardRef, useRef } from "react";
import { Container, Button, Typography } from "@material-ui/core";

const ComponentC = ({ scrollDiv }) => {
  return (
    <Container ref={scrollDiv} style={{ backgroundColor: "blue" }}>
      <Typography variant="h6">
       //Code here
      </Typography>
    </Container>
  );
};

export default ComponentC;

Scroll to other component in reactjs

1 Answers1