Smooth Scroll

[radiant holly]

Does anybody know how to implement smooth scrolling to an anchor on another page? Using Laravel, Vue, Inertia, TailwindCSS. I've implemented smooth scrolling in the past to anchors on the same page which is pretty straightforward, but how can I implement smooth scrolling so when a user clicks on a link such as href="/link-to-another-page#middle-of-the-page", the user's browser goes to the top of the new page and then smooth scrolls to the desired anchor tag?

[undone night]

Don’t think you can given that goes against the browser’s behaviour.

[tame cloak]

Afaik the current Inertia version doesn't work with smooth scroll (because of how the scroll position is set). This has been fixed, but not yet released
Scratch that, it was released in @inertiajs/[email protected]

[radiant holly]

Used to do something similar back in the day with JQuery. Essentially check for the presence of a URL hash using parsing logic on page load (similar to doing window.location.hash) , then scroll to the hash using the .animate() method. Don't really know the nuts and bolts of inertia well enough yet to figure out something similar to this approach. I just use the inertia magic and love not having to deal with the disconnected front and back end. Oh well, less bells and whistles I guess for this site. It would be kind of cool to have this type of functionality built into a Vue component somehow. 🤔

[scenic charm]

Doesn't CSS scroll-behavior: smooth; achieve this?

[radiant holly]

@scenic charm Whoa... never even knew that existed. Works with inertia. Hmmm... anyway to control the scroll duration with that?

I assume javascript would probably be needed to manipulate the duration.

[scenic charm]

I don't think there's way to control the duration

For that you really would need JS, as you said.