I am facing an issue with my angular 11 application. Whenever I navigate to a specific page, there is an automatic scroll down which I don't want. Please refer to the attachment (gif) and homepage.html below to understand the scenario.
https://i.sstatic.net/CtvKj.gif
The navigation point for users is located on homepage.html
<div *ngFor="let section of sections" class="col-md-4 p-2 p-sm-5">
<div class="bg-red3 box d-flex flex-column justify-content-end p-1 box">
<a routerLink="sections" class="nav-link"><h4>{{section.name}}</h4></a>
</div>
</div>
Attached is the homepage.ts file
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-homepage',
templateUrl: './homepage.component.html',
styleUrls: ['./homepage.component.scss']
})
export class HomepageComponent implements OnInit {
sections = [
{
name : 'Classroom Programme',
background : 'blue',
image : 'url("https://picsum.photos/200/300"),linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5))',
'background-position' : 'center center',
'background-repeat': ' no-repeat',
'background-size': 'cover',
'background-blend-mode' : 'overlay',
key: '1',
},
{
name : 'Distance Learning programme 1(DLP)',
background : 'blue',
image : 'url("https://picsum.photos/200/300"),linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5))',
'background-position' : 'center center',
'background-repeat': ' no-repeat',
'background-size': 'cover',
'background-blend-mode' : 'overlay',
key:2
},
{
name : 'Drishti Web Store',
background : 'blue',
image : 'url("https://picsum.photos/200/300"),linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5))',
'background-position' : 'center center',
'background-blend-mode' : 'overlay',
'background-repeat': ' no-repeat',
'background-size': 'cover',
key:3
},
];
constructor() { }
ngOnInit() {
}
}
This is the HTML for the problem page (2nd-page)
<section id="tags" class="container py-3 py-md-5">
<div class="row">
<div class="col-12">
<a id="{{tag.id}}" class="tag {{selectedId==tag.id ? 'active' : ''}}" (click)="onSelected(tag.id,$event)" *ngFor="let tag of tags">{{tag.name}}</a>
</div>
</div>
</section>
<div class="container">
<section class="row">
<section class="col-12 col-md-4">
<div class="wrapper p-2 p-sm-4 shadow p-3 mb-5 bg-white rounded">
<h4>This is title</h4>
<p>Live from</p>
<p>2021/01/21</p>
<button class="btn bg-red3 ml-0 mr-2">get Now</button>
<button class="btn bg-red3 ml-2 mr-0">Solutions</button>
</div>
</section>
//more sections but I cutted it to post the question
Attached is the ts file for the 2nd page
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sectionspage',
templateUrl: './sectionspage.component.html',
styleUrls: ['./sectionspage.component.scss']
})
export class SectionspageComponent implements OnInit {
constructor() { }
tags=[
{
name: 'Category 1',
id : 1
},
{
name: 'Cat 1',
id : 1
},
I have added more objects. But now I cut it to post short the question
]
ngOnInit(): void {
}
selectedId;
onSelected(id,event){
this.selectedId = id;
console.log(event.target.id);
}
}
This is the output of ng --serve
Angular CLI: 11.1.1
Node: 12.16.3
OS: win32 x64
Angular: 11.1.0
How can I prevent this scrolling behavior in the specific component of my application?