How To Prevent Scrolling With Navigation in Angular Component?

When navigating between routes in an Angular application, the browser's scroll position is often reset to the top of the page. This can be frustrating for users who want to maintain their scroll position between route changes. In this article, we'll explore how to prevent scrolling with navigation in Angular components.

Steps To Prevent Scrolling with Navigation

Step 1: Install Angular CLI

If you haven't installed Angular CLI yet, install it using the following command

npm install -g @angular/cli

Step 2: Create a New Angular Project

ng new prevent-scroll-app
cd prevent-scroll-app

Step 3: Generate Components

 ng generate component home
ng generate component about

Dependencies

"dependencies": {
 "@angular/animations": "^18.0.0",
 "@angular/common": "^18.0.0",
 "@angular/compiler": "^18.0.0",
 "@angular/core": "^18.0.0",
 "@angular/forms": "^18.0.0",
 "@angular/platform-browser": "^18.0.0",
 "@angular/platform-browser-dynamic": "^18.0.0",
 "@angular/platform-server": "^18.0.0",
 "@angular/router": "^18.0.0",
 "@angular/ssr": "^18.0.6",
 "express": "^4.18.2",
 "rxjs": "~7.8.0",
 "tslib": "^2.3.0",
 "zone.js": "~0.14.3"
}

Project structure

Example:Below is a complete example that demonstrates how to prevent scrolling during navigation using Angular Router.

To start the application run the following command.

ng serve --open

Output