Как я могу перейти к идентификатору / привязке на другой странице?

У меня есть ссылка в моей навигационной панели, которая при нажатии перенаправляет вас на домашнюю страницу и прокручивает до определенного раздела с помощью идентификатора. Когда я вызываю функцию по щелчку ссылки, она направляется на новую страницу, но никуда не прокручивается. Поскольку функция должна быть асинхронной, она не будет делать то, что я пытаюсь сделать.

Мой 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*/"; но я никуда не прокручиваю

Тогда я попытался узнать об Обещаниях, но я не уверен, что делаю это правильно. Я ДЕЙСТВИТЕЛЬНО думал, что это сработает, но это оставляет меня с той же проблемой, что и раньше. Кажется, они по-прежнему работают синхронно, и я просто перейду на новую страницу.

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();
  }
}

В целом, я очень расстроен и не могу за всю жизнь понять это. Спасибо всем, будьте в безопасности!

Всего 1 ответ


После толчка в правильном направлении из комментария от https://stackoverflow.com/users/3478010/roamer-1888 я понял это. Я просто сделал ссылку моей ссылки перейти на нужную страницу и добавил "#categoryTitleDiv" в конце веб-адреса. Так выглядит

<a href="...website nameindex.html#categoryTitleDiv"><li>Categories</li></a> Это не плавная прокрутка, но она работает!


Есть идеи?

10000