Question

0

192

Vistas

How to scroll to a specific component in React JS

I've built a website using React (without any HTML) and I've split every page into smaller components. Let's say that I have for example the main page, and in the first component (the main section which is located at the top of the page) I have a button, and when I click on it I want it to take me to the last component of the page (which is located at the very bottom). I want something similar to the HTML "on click scroll to ID element".

How can I achieve that? Keep in mind that for every component I've created a separate js file.

Thank you!

almost 3 years ago · Juan Pablo Isaza

3 Respuestas

Responde la pregunta

0

Add link to the page element

<Link to="/page#elementid">Go</Link>

Do like this, in your page component

componentDidMount() {
    let target = window.location.hash;
    target && document.querySelector(target).scrollIntoView()
}

almost 3 years ago · Juan Pablo Isaza Denunciar

0

you have to name every component by unique id.

let scroll_to = document.getElementById("conponent_id").offsetTop; window.scrollTo({ behavior: "smooth", top: scroll_to, });

onclick button just run this code

almost 3 years ago · Juan Pablo Isaza Denunciar

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-04T14:10:13.045Z

You can achieve it using react hooks. You have to refactor the last component a bit, as to forward a ref. You can expose the scroll method in the LastComp with useImperativeHandle hook.

LastComp.js

import { useImperativeHandle, forwardRef, useRef } from "react";

const LastComp = forwardRef((props, ref) => {
  const compRef = useRef();
  useImperativeHandle(ref, () => ({
    scrollIntoView: () => {
      compRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  }));
  return (
    <div style={{ height: "600px", backgroundColor: "gray" }} ref={compRef}>
      Body of the last component
    </div>
  );
});

export default LastComp;

In the FirstComp you can pass the ref as refToLastComp and call the method we exposed in the LastComp.

FirstComp.js

const FirstComp = ({ refToLastComp }) => {
  const scrolltoLast = () => {
    if (refToLastComp.current) {
      refToLastComp.current.scrollIntoView();
    }
  };

  return (
    <div
      style={{
        height: "600px",
        backgroundColor: "tomato"
      }}
    >
      <button onClick={scrolltoLast}>Scroll to Last</button>
      First
    </div>
  );
};

export default FirstComp;

On the main page, you can create and pass a new ref to LastComp and FirstComp.

Main.js

import { useRef } from "react";
import FirstComp from "./FirstComp";
import SecondComp from "./SecondComp";
import LastComp from "./LastComp";

export default function Main() {
  const ref = useRef(null);

  return (
    <>
      <FirstComp refToLastComp={ref} />
      <SecondComp />
      <LastComp ref={ref} />
    </>
  );
}

It doesn't matter where the component is located, it can be anywhere on the home page. when you click on the button it will scroll to the component to view (using scrollIntoView).

Code Sandbox

0

192