Problem with LiveView Anchors + History

ShawnMcCool

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

4 comments

/phoenix #html #liveview #anchors

2 558 4

2024-05-19 21:53:36 UTC

Showing Posts 1 to 4

Show Best Posts
Show All (oldest first)
Show All (newest first)

sodapopcan

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()
  }
});

Post #1

al2o3cr

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

Post #2

sodapopcan

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

Post #3

felix-starman

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 });
  });

Post #4

— All posts loaded —