page seems to scroll when link clicked at the bottom of the page

Question

whenever I click an anchor element it's being scrolled to the top of the page in various browsers such as firefox, safari, and IE. But the page is not scrolled in chrome. Used various approaches such as preventDefault(), return false and also using "#/" in href. But none of them seems to work. It would be great if someone could help me with this issue. Followed all the approaches mentioned in this page: How to prevent a click on a '#' link from jumping to top of page? .

Here is my code

function Scrolldown() {
  window.location.hash = "#relationships-card";
}

const attachLink = (onClick, relationship, maybeId) => (
  <a
    href="#relationship-card"
    aria-label="Attach Relationship"
    className="hidden-print"
    onClick={() => {
      onClick(relationship, maybeId);
      Scrolldown();
    }}
  >
    &nbsp;Attach
  </a>
);