3

Using scrollPositionRestoration: 'enabled' for the RouterModule is really a nice feature but how to disable the scroll animation / smooth scrolling so it snaps to the position?

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled',
    }),
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Background: Having smooth scrolling does not feel like navigating a "normal" website because normally if navigating back and forth there is no smooth scrolling.

Mick
  • 8,203
  • 10
  • 44
  • 66
  • Can you recreate the problem in a stackblitz? When I set up two vanilla pages the scroll position is set immediately - no smooth scrolling. https://stackblitz.com/edit/angular-ivy-h6sqt7?file=src/app/home.component.html. Is there maybe something else interfering with the scrolling in your app? – Kurt Hamilton Oct 21 '21 at 13:24
  • Which browser are you using? I am on Chrome – Mick Oct 22 '21 at 10:36
  • I'm using Firefox, but I also see the same instant scroll behaviour in my stackblitz in Chrome 95. Actually... I say instant, but there is a slight flicker when using the back button. But I'm still not seeing a smooth scroll. – Kurt Hamilton Oct 22 '21 at 12:14
  • 2
    Maybe you have `scroll-behavior: smooth` somewhere in css – klivladimir Oct 26 '21 at 13:18
  • https://stackoverflow.com/questions/46658522/how-to-smooth-scroll-to-page-anchor-in-angular-4-without-plugins-properly/75210400#75210400 – Abolfazl Roshanzamir Jan 23 '23 at 13:55

3 Answers3

7

The issue wasn't Angular, instead Bootstrap has set CSS smooth-scrolling to smooth.

Disabled it by $enable-smooth-scroll: false;

Mick
  • 8,203
  • 10
  • 44
  • 66
  • Noticed this when upgrading from Angular 11 to 13 and Bootstrap 4 to 5. First, I wasn't sure which was at "fault", but it was Bootstrap indeed. – andreas Feb 18 '22 at 22:54
  • this saved a lot of time checking Angular, because I would have expected to find the problem there. Thanks – DutchKevv Dec 05 '22 at 20:25
  • Echoing what @DutchKevv said - thanks for saving us the time and headache. – El-Mo Apr 11 '23 at 05:43
4

I was having the same problem. I tried using Mick's solution of changing the variable in bootstrap's "scss/_variables.scss" file but it didn't work out for me (Plus since it was in the node_modules which we don't share while the code is committed, any changes there wouldn't do any good as well, I guess). So I tried overwriting it in styles.css as:-

html {
  scroll-behavior: auto !important;
}

And it worked for me. I was having multiple CSS files in the global context for the project and maybe that's why the bootstrap variable change didn't work for me because other files may have interfered as well.

Florian Gössele
  • 4,376
  • 7
  • 25
  • 49
Arjun P
  • 63
  • 6
0

There is an open issue at Angular's github about scrollPositionRestoration

I tried to make an alternative, I hope it helps you:

https://stackblitz.com/edit/angular-ivy-jxm1mu?file=src%2Fapp%2Fapp.module.ts

I couldn't reproduce the navigate back behaviour with stackblitz because the app reloads.

When the user scrolls, save the scroll Y position and then, when the router emits the scrolling event, you make it not smooth.

window.scrollTo doc says that there is a value behavior: instant, I used auto because linter marked it as a error, so maybe it is not widely supported.

adrisons
  • 3,443
  • 3
  • 32
  • 48