Is it possible to have instant scroll on scroll handling ?

[mig-hub]

I use startViewTransition between my pages and I like it a lot. On most website, this works like I expect. However when the website has the global css property scroll-behaviour: smooth then the scroll is animated.

A workaround is to use disableScrollHandling() and scroll to top manually. It is not so bad but it is always the top where the sveltekit scroll handling does something better, if I press back on the browser, it scrolls back where I was.

So another workaround I have found is to temporarily unset the smooth css behaviour and revert it back.

  onNavigate((navigation) => {
    if (!document.startViewTransition) return;
    document.documentElement.style.scrollBehavior = 'auto';
    return new Promise((resolve) => {
      document.startViewTransition(async () => {
        resolve();
        await navigation.complete;
        document.documentElement.style.scrollBehavior = 'smooth';
      });
    });
  });

It works rather well (except in Safari but view transitions in general are not very smooth in safari), however I was wondering if it was the recommended way to do this or if there is a better way.

Thank you in advance for your help.

[sueun-dev]

SvelteKit's scroll restoration calls native positional scrollTo(x, y) with no behavior arg (the scrollTo(scroll.x, scroll.y) lines in client.js), so it just inherits whatever scroll-behavior your CSS sets. With html { scroll-behavior: smooth } global, every back/forward restore animates, and there's no built-in flag to make it instant per navigation.

So your onNavigate trick (flipping scrollBehavior to auto) is basically the intended fix. Cleaner alternative if you can: don't put smooth on html. Scope it to the specific containers or anchor links that need it, and restoration stays instant with zero JS.

fwiw behavior:'auto' wouldn't help even if you could pass it, since auto inherits your smooth value. Only 'instant' forces a jump.

[mig-hub]

@sueun-dev Thank you so much for your answer! Yes when I was doing it previously with scrollTo, I used behavior: 'instant'.