[Pro] Anchors on page not working on Firefox or Explorer

Freeway
1

I have created a “one page” web site that has a navbar at the top that moves to anchors on the page. All of the links work fine in Chrome (mac and win) and Safari.

They do not work on Firefox (mac and win) or Explorer. Well, one of the links works fine the others move you to the Top of the page. Any ideas?

Steven Houtzager

http://abcardio.org/awards/

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

Google gave me this: [Solved] Firefox Anchor Links

I’ve done this type of thing before, so it is eminently doable.

All an anchor is, is a unique id tag-- for example:

<div id="item5">

The way Freeway has created them for you is

<a id="AnchorName">

which isn’t working for Firefox because some of these items are floated and technically unreachable. The reason it works in Safari/Chrome because those browsers are forgiving the hell out of your layout issues.

But since you now know that a link anchor is just a unique name identifier, you can manually target the container which should bypass some of your problems:

<a href="#identifier">Go to This Thing</a>
...
<div id="identifier">
    <h3>You Are Now Here</h3>

Because of your sticky menu, you will need to use padding or margin at the top to offset it under the menu when it scrolls to the top.

For the long term, I recommend you experiment with different ways to create a layout like this where you have more control over the code that Freeway produces. Simpler, leaner code will make for more successful outcomes.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

3

That gave me a clue. I wrote out the whole link for each button and now it works fine for Firefox but not Explorer. Hmmm. Why would the first button that goes to an anchor work but not the others even with Explorer?

freewaytalk mailing list
email@hidden
Update your subscriptions at:

4

Make sure that your page is valid — all of the IDs on the page must be unique. Make sure that all URLs to anchors are fragment URLs — just the # and the id of the element, nothing else on either side. You will not get the effect you want unless you do this, because it is likely or possible that someone will have loaded the page with a www or not, and the two must match entirely if you want the in-page-no-reload-scroll effect to happen.

Walter

On Jul 1, 2015, at 3:09 PM, Steven Houtzager email@hidden wrote:

That gave me a clue. I wrote out the whole link for each button and now it works fine for Firefox but not Explorer. Hmmm. Why would the first button that goes to an anchor work but not the others even with Explorer?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

5

Using # and the id of the element is not working out. Not sure why.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

6

Instead of

change it to

- do it in the inspector.

Then your link would be #purchase-tickets

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:

7

Eureka, it works. Thanks for the tip.

freewaytalk mailing list
email@hidden
Update your subscriptions at: