-
Hi,
I noticed that my browsers (Firefox, Chrome) do not scroll to the anchor position in posts created using GeneratePress. For demonstration purposes, I created a very simple dummy post just containing a couple of H2 headings with some text. The last H2 heading is called ‘Anchor’ and has an anchor ‘my-anchor’ assigned. In the HTML of the post, the heading looks like this:<h2 id=”my-anchor” class=”wp-block-heading”>Anchor</h2>
Looks OK for me. However, when I display the post in the browser via URL
<my_website>/blog/dummy#my-anchor/
the browser displays the post but does not scroll to the anchor. First, I thought that the complexity of my real posts were the problem (a lot of pictures and picture carousels with lazy loading). However, it also does not work for a very simple post with just some headings and text.
Do you have an idea why scrolling to the anchor does not work?
See the private area for the complete URL of my dummy post.
Thanks a lot for your help.
Sven -
Hi Sven,
The correct URL should look like this:
/blog/dummy/#my-anchorThere should be a trailing slash before the anchor (#my-anchor).
-
Hi Alvind,
Thanks for the reply. At least for the browsers I use it doesn’t seem to make a difference if I use a trailing slash before the anchor. If the trailing slash is missing, the browsers seem to add it. For example, if the URL link in my blog post is<my_website>/blog/dummy#my-anchor/
the browser changes it to
<my_website>/blog/dummy/#my-anchor/
automatically. However, what solves my problem is to remove the terminating slash at the end of the URL (as you did in your example). In this case, everything works fine and the browser scrolls to the anchor position. If I remove the terminating string, it works regardless of whether the URL has a trailing slash before the anchor. Means, both
<my_website>/blog/dummy#my-anchor and
<my_website>/blog/dummy/#my-anchorwork correctly.
Thanks a lot for your help.
Cheers, Sven
-
No problem, glad to hear that!
- You must be logged in to reply to this topic.