Hex: 2.0.6
Elixir: 1.15.7
OTP: 25.3.2.7
Phoenix: 1.7.10
Phoenix LiveView: 0.20.1

I’m having difficulties with anchor links in LiveView. Clicking the takes the browser to the tag with the correct ‘id’. But hitting the ‘back’ button does not return the reader to the previous anchor.

I’m generating an article ‘table of contents’ dynamically. I’m doing this for a learner project and I realize that LiveView is probably not the perfect use case for a blog.

An example that works: Introduction - ShawnMc.Cool This is a traditional controller / template.

An example that doesn’t work: Active Record: How We Got Persistence Perfectly Wrong - ShawnMc.Cool

This is a live view component. Click the links below the title (not in the top navigation) and the anchors work. But hit ‘back’ and nothing happens.

image288×374 15.9 KB

I have attempted the following approaches to anchor link generation:

  def render(assigns) do
    ~H"""
    <.link navigate={~p"/#{@article[:slug]}/#article"}>Article</.link>
    <.link navigate={~p"/#{@article[:slug]}/#typical-approach"}>Typical Approach</.link>

    <a href="#article">Article</a>
    <a href="#typical-approach">Typical</a>
    """
  end

Thank you in advance for any help you can provide.