How can I scroll to a specific Y-axis point on another page?

userli6K 0
Viewed 28

I'm trying to figure out how to navigate to a specific point of a page (ID) from another page and, at the same time, lower the y coordinate to the desired point. For now I have used the simple relative link eg: phone.html#live and it would work if I didn't have at the top of the page a div with position fixed high 200px. This is the JS code I tried to implement but only the first condition is read. Any help is precious, I'm on the high seas.

//code of the destination page

if (location.hash = "phone.html#live") {
  scrollex();
}
if (location.hash = "phone.html#history") {
  scrollexTwo();
}

function scrollex() {
  console.log("scrollex")
  window.scrollBy(0, 630);
}

function scrollexTwo() {
  console.log("scrollex")
  window.scrollBy(0, 1320);
}
<nav id="nav">
  <a class="link" id="news" href="phone.html">NEWS</a>
  <a class="link" onclick="scrollex()" id="live" href="phone.html#live">LIVE</a>
  <a class="link" onclick="scrollexTwo()" id="history" href="phone.html#history">HISTORY</a>
  <a class="link" id="shop" href="phone.html#shop">SHOP</a>
  <div class="dividoNav"></div>
</nav>

hyperlink relative-path scroll javascript html
1 Answers

Try putting a very small delay on the scroll like this.

function scrollex() {
  console.log("scrollex");
  setTimeout(() => {
    window.scroll(0, 630);
  }, 1);
}

This way you are making sure that the scrollex function only scrolls after the page has scrolled to the place you want it.

userTVRl10
Related