如何滾動到另一個頁面上的 id/anchor？

Question

我的導航中有一個鏈接，單擊該鏈接后，會將您定向到主頁並通過 id 向下滾動到某個部分。 當我點擊鏈接調用一個函數時，它會指向新頁面，但不會滾動到任何地方。 由於該函數必須是異步的，所以它不會做我想做的事情。

我的 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*/";到了正確的頁面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://stackoverflow.com/users/3478010/roamer-1888的評論朝着正確的方向推動之后，我已經想通了。 我只是將鏈接的href轉到所需頁面，並在網址末尾添加了“#categoryTitleDiv”。 所以它看起來像

<a href="...\\website name\\index.html#categoryTitleDiv"><li>Categories</li></a>這不是平滑滾動，但它有效！