anchor in url does not scroll to id when using wire:navigate

[bezanis]

Livewire version

3.0.1

Which PHP version are you using?

PHP 8.1

Repository URL

No response

Steps To Reproduce

Normally when navigating to a link containing an #anchor, the page loads scrolled to the position of #anchor.
When navigating to a url containing an #anchor combined with wire:navigate, the page loads but is not scrolled to the position of the id.
In this example the first link loads the page scrolled to the

with the id 'starthere'.
However, the second link loads the page but not scrolled to the id 'starthere'.
<br/> <a href="/curpage#starthere">Navigate without wire:navigate</a><br/> <a href="/curpage#starthere" wire:navigate>Navigate using wire:navigate</a> <div class="h-[3000px]"> Filler </div> <p id="starthere">Start here</p> <div class="h-[3000px]"> More Filler </div>

Additional information

No response

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be removed if I haven't met the criteria above.

[xaimes]

Same. Does anyone have a solution?

[bezanis]

The workaround I've made is to set a 1ms timeout to wait for the redraw, and then check for the hash

window.addEventListener('livewire:navigated', () => {
setTimeout(() => {
if (window.location.hash == "") {
window.scrollTo({top: 0});
} else {
const element = document.querySelector(window.location.hash)
element.scrollIntoView({
behavior: 'smooth'
})
}
}, 1)
})

In this example, it's using a smooth scroll, but you could use an instant scroll if you don't like the effect

[l3eto]

this make an effect very bad, goes top, then scroll, if you are doing this on the same page...

[danie-ramdhani]

FYI, wire:navigate url with anchor tag/hash tag already fixed in #8143