Participant

Question

Something in my code is preventing visitor from reaching named anchor. Anchor works fine from menu.

Forum|Forum|2 years ago
July 20, 2023
2 replies
692 views

My page contains one index file.
My menu leads to many anchors within the page - these work fine.
If I want to share a url such as https://example.com/#namedanchor, the visitor lands at top of index page and not to the anchor point.

Something is preventing anchors from being reached if by a direct link.

Hope this is making sense.

Any ideas?

[Moderator changed URL to the industry-wide generic.]

This topic has been closed for replies.

Nancy OShea

Community Expert

Named Anchors were deprecated with HTML5 (2008) and became the current web standard in 2014.

You should be using unique IDs instead of Named Anchors.

EXAMPLE:

<a href="#div1">Link to Div1 on current page.</a>

<div id="div1">This is Division1</div>

<div id="div2">This is Division2</div>

etc...

Validate HTML code: https://validator.w3.org/

Nancy O'Shea— Product User & Community Expert

Edward31130434t73rAuthor

Participant

Thanks Nancy,

At the moment, the code goes like this:

<section id="services-text" class="inactive"> <img src="images/coachinglogo.png"

alt="Logo" height="160" width="280">
<h2 class="text-center">How and where</h2>
<h3 id="bookings">Coaching Sessions and Fees:</h3>
<p>BLA BLA BLA</p>
</div>
</section>

Do <section ids work in the same way as div id?

Edward

O

osgood_

Legend

Jon has given you the correct answer. What you have built is a SPA (Single Page Application). However you have built it using a poor choice of workflow/tutorial as its not really a SPA, its just a page where when you click on a menu link it 'reveals' the correct section. The javascript used takes the #walks and looks for that section and slides it in, it doesnt actually work like real named anchors or named sections, which jump or scroll to the designated section, either via a link clicked on the page itself or via a url link.

Your anchor names aren't even the same:

<a href="#walks"><img src="favicon-16x16.png" alt="Icon" height="16" width="16">Coaching walks programme</a></li>

This means the javascript being used is key in finding the right section to expose when a menu link is clicked upon. Unfortunately you have zero chance of doing that via a url (https://www.jospecoaching.com/#walks) the way the page is set up at the moment as the javascript won't run until a menu link is clicked.

Its not your fault as there are too many poor/bad ideas and tutorials out there that do not explore beyond the basic functionality. Look into it deeper and the issues are exposed. Its probably not a deal breaker but its annoying for sure. Building a SPA correctly, which will expose the correct section, either via a link on the page or a url link, is way more complex.

B

Ben M

Community Expert

Could be a coding error on the page causing the anchor not to be found so the page loads at the top. Can you share a link to the page in question?

Edward31130434t73rAuthor

Participant

Hello Ben,

The index page is: https://www.jospecoaching.com/
When you hover over the left side menu, you will see several different anchor points.
These are working when you click on any menu item but they do not go there if directly linked from the start.
So for example the link for coaching walks on the menu is: https://jospecoaching.com/#walks which works from within but not if, for example, clicked independantly as if you I had given you the link by email.

I also have a <a name="walkandcoach"></a> but that doesn't work either.

Thanks,

Jon Fritz

Community Expert

Your menu is javascript driven. In fact, if the browser has javascript disabled, all your viewers will see is a loading icon.

This is a major drawback to using all-in-one-page javascript driven sites.

While the page uses IDs (not named anchors) to bring viewers to the individual sections, the javascript has to run in order to make the page transition to the specific information. It can't do that with a standard external href#id style link.

Was there any documentation with the template you used to explain how to, or if you can, make external links open to the correct information?

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded