Anchor links with hash in ss templates wrong behaviour

<%- if @topic_view.topic.tags.present? %>
<%= t 'js.tagging.tags' %>: <%- @topic_view.topic.tags.each do |t| %> <%= t %> <%- end %>
<% end %>

Silverstripe Version 4.2.2

Question:

When I use hash anchor links like < a href="#1" >Link< /a > SilverStripe rewrites the link to the full path like < a href="/page/#1" >Link< /a >. This gives problems with some functions like smooth scrolling. To prevent this rewriting I added “rewrite_hash_links: false” in the yaml file, so my links are now just < a href="#1" >Link< /a >.
But the strange thing is that when clicking it goes to the home page / even there is no slash before the hash. Normally it should stay on the current page, but I guess something in SilverStripe sends it to home.

Any ideas to fix this?

SilverStripe includes a base tag in your pages, and the href of that tag will effectively be prepended to any relative links. So if you have a base tag like <base href="http://mysite.dev/"> then a link to #1 will be interpreted by the browser as a link to http://mysite.dev/#1.

If the link really is being rendered as <a href="#1">Link</a> and that anchor exists on the page, then SilverStripe shouldn’t be getting involved at all. The browser should just follow the link to the anchor, and not request a new page.

Does the link markup look correct? There are no extra attributes, targets, etc. Could there be some JS getting involved somewhere that is hijacking the click?

Well, markup looks correct. I have the same issue with 2 different ss sites. Gonna search for other causes, then maybe a js script somewhere. thanks.

Ah, okay, I think that’s the cause. Thanks!

Hi eriches,

I have the same issue that I get a page refresh instead of just scrolling down to the section.
I tried the instructions SilverStripe doc: Disable Anchor Rewriting, but no luck.
Can you remember how you solved this or what your problem was?
I have to say that I add the href anchor dynamically with JS, which looks fine when I inspect it in browser dev tools.

<section id="section-2">...</section>
<a class="arrow down" href="#section-2"></a>

Thanks a lot.