ShawnMcCool

ShawnMcCool

Problem with LiveView Anchors + History

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

Most Liked

felix-starman

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

Where Next?

Popular in Questions Top

sergio
In Ruby, I can go: User.find_by(email: "foobar@email.com").update(email: "hello@email.com") How can I do something similar in Elixir? ...
New
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set? Thanks.
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
Lily
In templates/appointment/index.html.eex: &lt;%= for appointment &lt;- @appointments do %&gt; &lt;tr&gt; &lt;td&gt;&lt;%= appoi...
New
script
If I have a string “1000 cfu/ml” . I want to remove the characters and / and space . So the string is like this "1000" What is the ...
New
nobody
Hi! In PHP: $SERVER['SERVERADDR'] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New

Other popular topics Top

mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID&lt;0.412.0&gt; terminating ** (Postgrex.Error) FATAL...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I fore...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? https://hexdocs.pm/ecto/Ecto.Repo.h...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
hariharasudhan94
Lets say i have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; "XX...
New

We're in Beta

About us Mission Statement