react offsettop

import React, { useRef } from 'react';

function ScrollExample() {
  const targetElementRef = useRef(null);

  const scrollToElement = () => {
    if (targetElementRef.current) {
      window.scrollTo({
        top: targetElementRef.current.offsetTop,
        behavior: 'smooth'
      });
    }
  };

  return (
    <div>
      <button onClick={scrollToElement}>Scroll to Target</button>
      <div style={{ height: '1000px' }}></div> {/* Just for spacing */}
      <div ref={targetElementRef} style={{ height: '200px', backgroundColor: 'lightblue' }}>
        Target Element
      </div>
    </div>
  );
}

export default ScrollExample;

import React, { useRef, useEffect } from 'react';

function ScrollExample() {
  const targetElementRef = useRef(null);

  useEffect(() => {
    if (targetElementRef.current) {
      console.log(targetElementRef.current.offsetTop);
    }
  }, []);

  return (
    <div>
      <div ref={targetElementRef} style={{ height: '200px', backgroundColor: 'lightblue' }}>
        Target Element
      </div>
    </div>
  );
}

export default ScrollExample;