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

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

0 голосов
/ 28 марта 2020

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

Мой 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 Ответ

0 голосов
/ 28 марта 2020

После пу sh в правильном направлении от комментария от { ссылка } Я понял это. Я только что сделал href моей ссылки go на нужную страницу и добавил «#categoryTitleDiv» в конец веб-адреса. Похоже, что

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

...