Links with anchors not working

scrolling
(Tanuj) #1

When I use an anchor point from an external link, i.e., www.example.com#anchor, the page does not scroll to an anchor.

In the attached file, the button can be used to go the anchor. But if i use the same link in a new tab, it doesn’t jump to the anchor. (Same thing happening in the live environment)
example.hype.zip (10.5 KB)
Any help would be appreciated.

Thank You!

#2

This is likely because the anchor does not exist on that page, since the HTML is rendered later (when the Hype document loads).

You’ll need to run this function On Scene Load for your first scene:

  var hash = location.hash.substring(1);  
  if (hash.length > 0) {
  	document.getElementById(hash).scrollIntoView(); 
  }

It gets the ‘#hash’ portion of the URL if there is one, and then jumps to that position.

(Tanuj) #3

Hi @Daniel

Thanks for your help. That works on the example document, but it doesn’t seem to work on the project I’m working on.

My website (not this page though) uses # to redirect to a scene from an external link as well. Could that be a problem?

(Tanuj) #4

Just an update:

  var hash = location.hash.substring(1);  
  if (hash.length > 0) {
  	window.location.href='#'+hash; 
  }

The change from document.getElementById(hash).scrollIntoView(); to window.location.href=’#’+hash; worked for me.

Also, I needed to add top value in CSS for my Sticky Navbar to not glitch.

.sticky{
position: fixed !important;
top: 0 !important;
}

Once again, thanks for your help! @Daniel