How can I get Splade to scroll to bottom of a long table?

Question

A typical use case would be: You have a button at the bottom of a list to ADD an item.

After adding, you want to automatically scroll to the bottom of the list where the ADD button is to add another item. (Not have to scroll manually to the bottom of the list to add a new item each time.)

I've tried 2 ways:

First using anchor tags:

I have a div with an anchor below the table:

<div id="bottom"></div>

And in my controller I have:

return redirect()->route('carts.show', $cart)->withFragment('bottom');

which is supposed to give a URL like: http://localhost/carts/869#bottom

But the #bottom is removed from the URL, so it doesn't go to that anchor.

Secondly I tried a script:

Added this to my blade:

<x-splade-script>
            window.onload = function() {
            window.scrollTo(0, document.body.scrollHeight);
            }
window.scrollTo(0, document.body.scrollHeight);
        </x-splade-script>

But it only works on the first page load. When I make a change and then re-direct to the same page, the scroll doesn't work again. (F5 makes it reload the page and then it scrolls to the bottom again)

How can I get Splade to scroll to bottom of a long table?

0 Answers0