scroll to element on reload page react

Question

I'm trying to figure out how to scroll to the element after page reloads. I'm trying to ref the element and scroll to it after page reloads.

My current example will just scroll to the end of the page

const transactionRef = useRef(null)
const scrollToElemet = () => {
    transactionRef.current.scrollIntoView({ block: 'end', behavior: 'smooth' });
  }

  useEffect(scrollToElemet)

return (
  <div ref={transactionRef}></div>
)

How can I calculate the position of the element and scroll to it on page reload? Thanks

with animation scrolling or simple move?

Alex
– Alex

2020-02-14 16:19:14 +00:00
Commented Feb 14, 2020 at 16:19 — Alex
– Alex, Commented Feb 14, 2020 at 16:19

Dennis Vash · Accepted Answer · 2020-02-14 16:22:51Z

1

Adding this answer because querying the DOM in react is an anti-pattern:

export default function App() {
  const footerRef = useRef();

  useEffect(() => {
    footerRef.current.scrollIntoView();
  }, []);

  return (
    <>
      <div className="main">Main</div>
      <div ref={footerRef} className="footer">
        Footer
      </div>
    </>
  );
}

answered Feb 14, 2020 at 16:22

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

copser Over a year ago

yup, I just realized what have I done, also I need to use forwardRef so it's a totally different story.

Zohaib Ijaz · Accepted Answer · 2020-02-14 16:12:48Z

I would say, add an element at the bottom of your page and then use that element to scroll. Here is a sample

https://codesandbox.io/s/jolly-dhawan-k7q8b?fontsize=14&hidenavigation=1&theme=dark

Also, you need to pass [] as second argument so it only scroll on first mount otherwise it will keep on scrolling down to bottom on every change or on every render.

function App() {
  const [checked, setChecked] = useState(false);
  useEffect(() => {
    document.getElementById("footer").scrollIntoView();
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <span onClick={() => setChecked(v => !v)}>{checked ? "Enable" : "Disable"}</span>
      <h2>Start editing to see some magic happen!</h2>
      <div className="main">Main</div>
      <div id="footer" className="footer">
        Footer
      </div>
    </div>
  );
}

Collectives™ on Stack Overflow

scroll to element on reload page react

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related