How to prevent page reload using anchor tags

Questions
#1

Silverstripe Version: 4.8

I want to use an anchor tag on the same page with arrows scrolling to certain sections of the page. Normally this should be straight forward, so I thought, but I just can’t get it to work without a page refresh.

I tried all kind of variations (rewrite_hash_links: false and the on special page php version) of the instructions: SilverStripe doc: Disable Anchor Rewriting, but no luck.

I tried to use it hard-coded on a page. It doesn’t work. (I actually want to add the anchor tags dynamically using JS.)
Does really nobody else have this problem or is everybody working around this using JS?

Has anybody an idea how to get it to work without JS or is this a bug?

Thanks.

#2

Can you post your HTML? Head and the link.

Works for me just using the editor. To be clear though, the anchor button in the editor sets the id to be scrolled to.

I also don’t have a base tag in the head

#3

Are you looking something like

<a href="#anchor">Go to anchor/a>
[...]
<h2 id="anchor">Here is the anchor</h2>

When you click on the link, you go to the anchor without page refresh.

#4

Thanks LanceH and blueace,

Yes, my code looks like this, but I create it dynamically with JS and I use the base tag.
The base tag seems to be the problem and I tried every step described it the document (llink in initial post), but that didn’t help.
I solved it with JS, but hoped for an easier out of the box SilverStripe solution.

#5

Did you try the following:

<a href="$Link#someanchor">Section</a>

If you have a base tag set, and just use the anchor starting with the hash, you might get some problems. Adding the link into the start may fix this.

It should render as something like: <a href="/some-page#someanchor">Section</a>

If you’re injecting all this with JS, then you may need to add something into the markup with the right URL segment, so you can build the links accordingly.