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

[Edward31130434t73r]

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.]

[Ben M]

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?

[Edward31130434t73r]

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]

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?

[Edward31130434t73r]

Thanks Jon, for your explanation. I'll ponder on this and perhaps, time to adapt my site to a more rescent template as there were no instructions given with the original one. 

[Nancy OShea]

If you re-build your site with Bootstrap's responsive framework, there is a feature in Bootstrap called Scrollspy which allows menu highlighting to show where user has scrolled on long pages.   It's useful for content-heavy pages, and works from external as well as internal links.

https://getbootstrap.com/docs/5.0/components/scrollspy/#item-1

Hope that helps.

[Nancy OShea]

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="https://example.com/index.html#div1">Link to Div1 on HOME page.</a>

<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/

[Edward31130434t73r]

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>
<!-- /.services.text -->

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

<section id="services-text" class="inactive">

Edward

[osgood_]

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>

<a name="walkandcoach"></a>

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.

[Nancy OShea]

IDs will work on any tag.   However, you have an orphaned closing </div> that you don't need.

Validate your code and fix all reported errors.