Anchors jumping to top of page in Safari

Hype-based website:

I can’t get anchors to work with Safari. They work perfectly with Firefox.

This issue is that they take you to the top of the page where the anchor is but not to the anchored element.

At first I could type in the #anchor after the index URL and it would work. After testing the third one they stopped working, even the ones that worked only moments before.

For a while I could copy the URL from Firefox, paste it into Safari and it would work, but then that stopped working as well.

Meanwhile, I had made no changes whatsoever to the documents themselves.

Examples:
http://ohair.com/_TEST_SITE/index.html#horizon
http://ohair.com/_TEST_SITE/index.html#exteriors

Any ideas?

I found the solution. For browser compatibility insert a slash (/) before the hashtag.

1 Like

Well, this worked for a while. And then it stopped working. If I use the # without the / I am sent to the top of the target page. If I use /# Safari can’t find the page at all.

I have no idea why it would stop working. I wonder if something is getting hosed in the relay.

Re: Anchors jumping to top of page in Safari

This did not resolve the issue. My Hype-based site has too much content to include in a single Hype document, I need to be able to jump to a page and then return to the same spot. A standard #anchor works great in Firefox but not in Safari. I thought I had found a fix by using /# and it worked briefly, then because of some change I can’t figure out, it stopped working.

Can you share your document?

Here is the doc:

(download)

Your unique ID was set to /#horizon – just use horizon

This worked for me in Safari.

I changed the target ID to horizon1 (to differentiate this from other layouts). For the link back I have tried the following:
http://ohair.com/_TEST_SITE/index.html#horizon1
http://ohair.com/_TEST_SITE/index.html/#horizon1
http://ohair.com/_TEST_SITE/index.html/horizon1

Either way, this either takes me to the top of the page in Safari or it can’t find the page.

I am confused!

The idea of an anchor is to have code like this:

<a href="#anchorName">

And then in the URL you would have

index.html#anchorName

Once the page loads it finds the tag, “anchorName” and puts it in view.

I have looked at the two files, but I can see no tag, so if I put in the URL:

index.html#horizon it just takes me to the index page, because it cannot find the anchor which it’s being asked to find.

example of the URL: http://ohair.com/_TEST_SITE/index.html#horizon Then used console to search for a tag “horizon”. No match found.

I’m using a mouse action / go to URL. The link works perfectly in Firefox but in Safari it takes me to the top of the page instead of to the anchor.

The horizon group has the horizon1 ID (1 for responsive layout 1).

Try this link in Firefox and then try it in Safari:

http://ohair.com/_TEST_SITE/index.html#horizon1

Very late to the game, but I had the same problem, found a solution other than backslash.

I had made an anchor to an image. Which works in many other browsers, but not in Safari.
The anchor was made like so

< a name="shop" id="shop">

However: it is empty, then it (dont know why) it does not work in Safari. I added a random character (a period, ".") and then it was no longer empty and became an anchor-element to safari.

so I changed the html to

< a name="shop" id="shop"> .

Thanks for following up -- You may be able to use an invisible character as well so you don't see a .

Can you see if this works?

<a name="shop" id="shop">&nbsp;</a>

I am guessing it may be a timing-based behavior difference. Hype dynamically creates its HTML, and Safari may be trying to go to the anchor before it exists (without trying again when it is shortly thereafter made).

If @daniel's suggstion doesn't work, you could try adding a Run JavaScript action to the first On Scene Load handler in the Scene Inspector to run code like:

if(location.hash != "") {
	location.href = location.hash;
}

This will just reset the URL to that of the hash and should make the scroll jump.

1 Like

You know, before reading this thread today, I was thinking that both attributes was the safest way. But after reading this...

...I'm not sure. Also, since this topic is few years old, some things have changed with the browsers.

I like the JavaScript solution, but a different way. Lately, I've usually been using the scrollTo method instead of anchor links.

This involves knowing the top value of the target element, and there are pitfalls with this method too, but this allows me to scroll to element locations without having to add anchor links. There's also the… behavior: "smooth" …which is a nicer effect, when it works. :smile:

(I'm looking at you Safari, but not directly, because those tabs in version 15 are glaring.)

1 Like

I made an example based on Jonathans suggestion:
href-jumping-example.hype.zip (29,1 KB)

1 Like

I did this, but the hyperlink has a little line, the underline text decoration for the  , even though I put

< style>
a {text-decoration: none;}

in my header.

< /style>

to 'fix' it, it is a workaround but I made the   pt 1 in size so it disappears .

Hype has a feature to insulate itself from outside styles, so that a page's CSS does not "leak" into content unexpectedly. Beyond your solution of shrinking the text or otherwise hiding the text somehow, there are a few solutions, ranked in order of suggested guidance:

  • add an inline style, like <a name="shop" style="text-decoration:none">&nsbp;</a>
  • Uncheck the Protect from External Styles option in the Document Inspector
  • Use the !important directive on the CSS, like text-decoration: none !important;