Anchor Scrolling in a page from another one in Angular

Question

I have a working angular project which basically most of the component exists on the home page, and I use anchor scrolling, links are in the header. Everything works great except when I am in another page/route and I click on the link from the header to take me to the home page fragment, it scrolls to the end of the page instead of the expected behavior which is the element.

This code works perfect if i am on the same page (localhost:4200/):

const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  scrollPositionRestoration: 'enabled',
  scrollOffset: [0, 100],
  onSameUrlNavigation: 'reload',
};

but as I said, when I am in another page (localhost:4200/page) and click on a link from the header to take me to the fragment in home page, it just scrolls right to the bottom of the home page.