I have a React class component which is separated into left half and right half, left side has options to select like from Fruits, Vegetables, Junk and on right side, a list of that item is shown. Issue: Suppose I click on Fruits and scroll the right side to mid of list, then again clicking on Fruits take me to the place where I previously was. Expected: Clicking on Fruit again should show the list from top.
I tried window.scrollTo(0,0) and window.scrollBy(0, topRef.current.offsetTop) but it is scrolling the entire window including left side. How can I just scroll the right side of items on re-render?
Try using ScrollIntoView instead of scrollTo and scrollBy.
add an Id to the element where you intend to scroll and use scrollIntoView with that id
document.getElementById(elId).scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"});