Anchors jumping to top of page in Safari


(Trey Yancy) #1

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?


(Trey Yancy) #2

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


(Trey Yancy) #3

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.


(Trey Yancy) #4

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.


#5

Can you share your document?


(Trey Yancy) #6

Here is the doc:

(download)


#7

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

This worked for me in Safari.


(Trey Yancy) #8

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.


(Andrew) #9

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.


(Trey Yancy) #10

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