How can I scroll to a an id/anchor on another page?

Question

I have a link in my nav that, when clicked, directs you to the home page and scrolls down to a certain section via id. When I call a function on the click of the link it will direct to the new page but not scroll anywhere. Since the function has to be asynchronous it won't do what I'm trying to do.

My HTML

<a id="categoryButton"><li>Categories</li></a>
<!-- further down the page -->
<div id="categoryTitleDiv"><h1 id="categoryTitle">Where I want to scroll to</h1></div>

My JS

document.getElementById("categoryButton").onclick = function onCategoryButtonClick() {
    window.location.href = "</*my page address*/";
      document.getElementById("categoryTitleDiv").scrollIntoView();
    }

The problem with this is that since they are synchronous the commands happen at the same time. So I end up on the right page from window.location.href = "</*my page address*/"; but I don't scroll anywhere.

Then I tried to learn about Promises but I'm not sure I'm doing it right. I REALLY thought this would work but it just leaves me with the same problem as before. They seem to still run synchronously and I will just get to the new page.

document.getElementById("categoryButton").onclick = function() {
  const promise = new Promise(function onCategoryButtonClick(resolve, reject) {
    const clickedVar = true;
    if (clickedVar) {
      window.location.href = "/*my page address*/";
      console.log("yay");
      resolve();
    } else {
      console.log("nay");
      reject();
    }
  });

  promise.then(function(){
    document.getElementById("categoryTitleDiv").scrollIntoView();
  }, function(){
    console.log("What the heck happened?");
  });
}

I've tested a couple of other things too like setTimeout (though that isn't ideal) but that didn't work either. I think because it wanted to scroll to a part of the original page and not the newly loaded page. But I am not great at Javascript so I'm probably very wrong. Another thing I tried was calling a window.onload function and using that to execute the scroll code but that left me with the same result as all the others, I make it to the page but it scrolls no where. Here's the code for that

  window.location.href = "/*my page address*/";
  window.onload = function(){
    document.getElementById("categoryTitleDiv").scrollIntoView();
  }
}

Overall I am very frustrated and cannot for the life of me figure this out. Thanks all, stay safe!

Answer 1

After a push in the right direction from a comment from https://stackoverflow.com/users/3478010/roamer-1888 I have figured it out. I just made the href of my link go to the desired page and added "#categoryTitleDiv" to the end of the web address. So it looks like

<a href="...\\website name\\index.html#categoryTitleDiv"><li>Categories</li></a> It's not smooth scrolling but it works!