Scrolling to an anchor when loading a LiveView page?

Questions / Help
1

When visiting a non-LiveView page with a URL that contains a fragment, such as /non-live#foo, the browser will scroll to the element with name or id “foo” when the page loads (as expected).

When visiting a LiveView page with a similar URL, such as /live#foo, the browser does not scroll when the page loads, but I would like it to. I am able to get it to scroll by adding a Javascript event listener for phx:page-loading-stop, finding the element that matches the URL fragment, and then scrolling to that element using LiveView’s Browser.getHashTargetEl function and Javascript’s scrollIntoView function.

Has anyone else noticed this or found a different solution, or is it something that LiveView doesn’t (yet) support?

2

This is supposed to work (search for “scroll” in the changelog, similar past issues that have been since fixed). On what LV version are you?

3 Likes
3

I’m on 0.14.7, which is the latest LiveView as of today.

I generated a fresh LiveView project and reproduced the issue (in the “scroll-to-anchor” branch of the repo) in case anyone is interested.

If it’s supposed to work the way I described, I can file an issue.

4

What browser are you using? Your demo works fine for me.

5

The demo fails for me in Chrome 86.0.4240.11, Safari 14.0, and Edge 86.0.622.58. It works in Firefox 82.0.2. All on MacOS 10.15.7.

If I first load “localhost:4000/” and then add “#300” to the URL, it jumps there. But if I open a new window and paste in “localhost:4000/#300” then it doesn’t scroll.

6

(Also, in case it wasn’t clear, you need to check out the scroll-to-anchor branch of the repo and read the branch’s readme to see the things that work and don’t work for me.)

(Also also, thanks for trying it out @sfusato!)

7

In Firefox it works fine as is, I’ve now tested with Chrome also and it didn’t worked (I’m on Linux), but it seems that the HTML specs state that:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-”), underscores (“_”), colons (“:”), and periods (“.”).

I’ve added a letter at the beginning of the id and it looks like that was the cause as now it’s working in Chrome as well. Can you do that change and re-test?

1 Like
8

As of yesterday… today it’s 0.14.8 :slight_smile: