Use # links with transitions

Same-page links beginning with # are ignored by the Transition plugin and keep native browser behavior. For a fragment on another page, handle it after page entry:

luge.lifecycle.add('pageIn', done => {
  const hash = new URL(luge.transition.getNewUrl(), location.href).hash
  const target = hash ? document.getElementById(decodeURIComponent(hash.slice(1))) : null
  if (target) target.scrollIntoView()
  done()
}, 20, 'transition')

The callback must call done() even if no target exists. This example assumes valid URI-encoded fragment identifiers. For smooth scrolling, coordinate the target position with your Lenis instance.

Try it

Open the full demo