score:2
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).
score: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()
}
score: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
Source: stackoverflow.com
Related Query
- How to scroll to a specific component in React JS
- How to add scroll event in react component
- How to reveal a React component on scroll
- How to navigate to another page with a smooth scroll on a specific id with react router and react scroll
- How to implement a React infinite scroll component for a chat app like Facebook Messenger?
- How can I search for a component with specific key in React Developer Tools?
- How to make AppBar component from material-ui-next react to scroll events
- How to make a React component fade in on scroll using IntersectionObserver, but only once?
- react-scroll | How to scroll to a specific targeted component when clicking on Navbar Link
- React - how to determine if a specific child component exists?
- how to update specific index of integer array in functional component setState in react js
- How to hide/show a specific component on react
- How to have one React component take up entire screen (on all devices) until you scroll down?
- How would you call specific CSS stylesheet in a React component on a specific site?
- How to set state of a react component with a specific item from a returned json object?
- How can I change a specific component in React on an eventHandler
- How to find a React component inside an element with specific class using enzyme?
- How to mount nested react component on a specific node?
- How to use useRef() for multiple components and to scroll down to a specific component when user clicks
- How to useRef and scrollIntoView to scroll to specific element in a mapped list in React
- How to get specific value from react Component
- how do i open a specific collapse accordian when using a anchor component in react typescript
- How to add scroll event on a React component instead of adding on window object?
- How to scroll component to the bottom in react
- how to use a styled component to play an animation on scroll in react
- How can I create a parent component for specific pages (to be able to add react context inside parent)?
- React - How to target a specific component instance
- React use ref to scroll to a specific component when click on link
- How Can I make my React Button Component updates CSS only on the specific page?
- How to send specific API data from one component to another called within React Component in react
More Query from same tag
- action.payload in creactAsyncThunk is undefined
- I have a problem array.map() method it loops so many times every time i call that in React
- Is this an acceptable way to change state in react?
- What type i should pass to my imageIcon props in react typescript?
- Mobx reaction on sub array change/remove
- How do I hide the div that is encapsulating a component from an onClick inside the encapsulated component?
- Get data using useeffect hook in react js
- useState variables are null in event callback
- Can't fill my state in componentDidMound function
- Show React component based on click event
- Flags inside a React Bootstrap select option renders as [object, object]
- Re-render another react component, based on the action of another react component
- next-auth Google provider [next-auth][error][client_fetch_error]
- React Array.find() not working while setting input's defaultValue to a string from array of objects
- How to prevent a div from increasing the value of an upvote after one click using react
- Updating state in reducer using variables
- Use this.state in css within React
- Child components re-rendering on parent re-render
- In React Router V4, how to navigate to a page outside defined basename?
- How to prevent Re-render in react when the state is changed using Functional Component
- Stubbing functions on Cypress.io being ignored
- Before and After pseudo classes used with styled-components
- Delay in storing the content of an event in array by one click in React
- How to open a text file and read the contents from it on react native?
- How to display the selected value from an autocomplete textfield in React?
- CASL Authorisation in a React app "Can" conditions have no effect
- Why the return type valuated as (boolean | function)?
- Express.js: respond with image file instead of binary file?
- Replace a string to JSX Tag
- Jest: SVG require causes "SyntaxError: Unexpected token <"