I'm trying to create a button that scrolls to a particular element that is further down on the page. I have managed to create a function that allows me to scroll to the top offset of the item like this:

const scrollToIntro = () => {
  const viewPortOffSet = window.document
    .getElementById("introduction")
    .getBoundingClientRect();
  window.scrollTo({
    top: viewPortOffSet.top + window.scrollY,
    behavior: "smooth",
  });
};

However, I find that scrolling to the top to be a little too much in the sense that have scrolled too far down and would like to subtract some value from top relative to the viewport. One way I've found is to multiply the number by a factor like this:

const scrollToIntro = () => {
  const viewPortOffSet = window.document
    .getElementById("introduction")
    .getBoundingClientRect();
  window.scrollTo({
    top: viewPortOffSet.top * 0.95 + window.scrollY,
    behavior: "smooth",
  });
};

But I am wondering if there are alternatives that can maybe involve subtraction of values using "vh" etc.