如何滚动到另一页上的 id/anchor？

Question

我的导航栏中有一个 link，单击它后，您会转到主页并通过 id 向下滚动到某个部分。当我单击 link 调用一个函数时，它将定向到新页面但不会滚动到任何地方。由于函数必须是异步的，所以它不会做我想做的事情。

我的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>

我的JS

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

问题在于，由于它们是同步的，因此命令同时发生。所以我最终从 window.location.href = "</*my page address*/"; 转到了正确的页面，但我没有滚动到任何地方。

然后我尝试了解 Promises，但我不确定自己是否做对了。我真的认为这会奏效，但它让我遇到了和以前一样的问题。他们似乎仍然运行同步，我将进入新页面。

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?");
  });
}

我也测试了一些其他的东西，比如 setTimeout（尽管这并不理想），但也没有用。我想是因为它想滚动到原始页面的一部分而不是新加载的页面。但是我不擅长 Javascript 所以我可能错了。我尝试的另一件事是调用 window.onload 函数并使用它来执行滚动代码，但这给我留下了与所有其他人相同的结果，我进入了页面但它没有滚动到任何地方。这是

的代码

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

总的来说，我很沮丧，我这辈子都无法解决这个问题。谢谢大家，注意安全！

Answer 1

在 https://whosebug.com/users/3478010/roamer-1888 的评论朝着正确的方向推动之后，我已经弄明白了。我刚刚将 link 的 href 转到了所需的页面，并在网址末尾添加了“#categoryTitleDiv”。所以它看起来像

<a href="...\website name\index.html#categoryTitleDiv"><li>Categories</li></a> 滚动不是很流畅，但是很管用！

如何滚动到另一页上的 id/anchor？

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

javascript

asynchronous

hyperlink

onload

promise