Hello,
I am writing custom twig for a webpage. I have a problem with using the anchor links together with category parameters.
My blog page looks like this:
- header section
- buttons with post category names and links
- list of all the blog posts that match currently selected category.
The links on the buttons so far have been like this: /blog/category:organizacja, /blog/category:zwyczaje etc.
I am constructing them like this: <a href="{{ page.url }}/category:organizacja#lista">
And they have worked correctly. Upon clicking on the button browser did a full redirect to the blog page with specific parameter. My twig reads the parameter from url, marks the specific button as active/chosen and shows the list of posts only with the chosen category.
Right now, I wanted to introduce an enhancement - make an anchor on the list of posts element and make the url like this: blog/category:organizacja#lista.
I would expect upon clicking link the browser redirects to the page with correct category param in the url and scroll down the page to the achor link. However, my browser (chrome) ignores the parameter part of the url, adds the anchor to the url bar and just scrolls down to the posts section.
What should be done to fix this behaviour?
EDIT:
I have tried also the creating the full url to my page:
<a href="{{ base_url_absolute }}{{ page.url }}/category:organizacja#lista"> but looks like the browser detects we’re staying on the same page but with different parameters - this does not help.
My current workaround is using the JS to force redirection using JS, best to remove the link totally in this scenario:
<a href="#" onclick="event.preventDefault(); window.location.href = '{{ page.url }}/category:organizacja#lista';">
It works but I feel like it’s not how it is supposed to be done by the book.