Scroll programatically not working

[Pedropfuenmayor]

I am trying to scroll programmatically to a section of a page and it works when i use scrollIntoView() but if use scrollTo() it doesn't work as expected. I need to add some extra pixels to the scroll position. This is how my component looks like

import { AnchorNavigation } from 'layouts';
import { useEffect, useState } from 'react';

function navigateTo(id: string) {
  const section = document.getElementById(id);
  if (section) {
    const top = section.getBoundingClientRect().top + window.screenY;
    const offset = 122;
    const finalTop = top - offset;
    section.scrollTo({
      top: finalTop,
      behavior: 'smooth',
    });
  }
}

export const PageNavigation = () => {
  const [sectionId, setSectionId] = useState<string | null>(null);

  const navigationHandler = (id: string) => {
    return () => {
      setSectionId(id);
    };
  };

  useEffect(() => {
    if (sectionId) {
      navigateTo(sectionId);
    }
  }, [sectionId]);

  return (
    <AnchorNavigation
      items={[
        {
          label: 'Section One',
          onClick: navigationHandler('section-one'),
        },
        {
          label: 'Section Two',
          onClick: navigationHandler('section-two'),
        },
        {
          label: 'Section Three',
          onClick: navigationHandler('section-three'),
        },
      ]}

    />
  );
};

[lili21]

it's not related to remix.

[Pedropfuenmayor]

Well.. i have this problem using Remix, i wonder if the framework affects the behavior of scrollTo in any way..