Problem with LiveView Anchors + History

Phoenix Forum Questions / Help
, ,
1

The following testing live view has anchor tags. When clicked, the anchors work fine and navigate the browser to the correct location. When I press the browser “back” button, the anchor changes in the history and the browser does not change scroll positions.

Is there a way to recover this forward/backward navigation behavior?

LiveView: 0.20.2

defmodule LiveAnchorTestWeb.AnchorLive do
  use LiveAnchorTestWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, socket}
  end

  def render(assigns) do
    ~H"""
    <h1><a id="heading">heading</a></h1>
    <br />
    <a href="#footing">go to footing</a>
    hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br />
    hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br />
    hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br />
    hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br />
    hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br />
    hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br />
    hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br />
    hi<br /> hi<br /> hi<br /> hi<br />
    <h2><a id="footing">footing</a></h2>
    <br />
    <a href="#heading">go to heading</a>
    """
  end
end
2 Likes
2

I’m bumping this as I’m pulling my hair out with this atm. I can hack fix it but is this supposed to work? It seem to work sometimes. I don’t have any custom JS watching scroll or anything like that.

In any event, this is my hack fix:

// assets/app.js

window.addEventListener("phx:page-loading-stop", () => {
  const hash = window.location.hash

  if (hash) {
    const el = document.querySelector(hash)

    if (el) el.scrollIntoView()
  }
});
3

I don’t think this is a LiveView problem - the back button goes to the previous scroll position, not the anchor, even on static pages. For instance:

  • visit https://datatracker.ietf.org/doc/html/rfc1866
  • click on the heading for section 7.4, adding #section-7.4 to the URL
  • scroll down in the document
  • click on the link on the right side for RFC 2854
  • use the back button. Observe that the page has #section-7.4 in the URL, but is still scrolled to where you left it
4

Ohhhh yes, you’re right, derp. More of a “I just want to get this done” thing in my part.

5

Something like the JavaScript below combined with a handle_params that uses a push event could probably get you what you want

  // Scroll to target selector from event
  window.addEventListener("phx:scroll-into-view", e => {
    let target;
    if (e.target) { target = e.target };
    if (e.detail.id) { target = document.getElementById(e.detail.id) };
    if (target == window) { return };

    let behavior = e.detail.behavior || "auto";
    let block = e.detail.block || "start";
    let inline = e.detail.inline || "nearest";

    target.scrollIntoView({ behavior, block, inline });
  });
1 Like