In this post, I’m going to show you how you can scroll to a specific anchor position in angular. For this, we’ll be using ViewportScroller abstract class.
ViewportScroller defines a scroll position manager. Implemented by BrowserViewportScroller. It comes with 5 abstract methods.
- setOffset()
- getScrollPosition()
- scrollToPosition()
- scrollToAnchor()
- setHistoryScrollRestoration()
For our need, we’ll be using scrollToAnchor() method of ViewportScroller. Which accepts the id of the anchor element as a parameter.
abstract scrollToAnchor(anchor: string): void
Example
// .html file
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" (click)="scrollToAnchroingPosition('about')" href="javascript:void(0);">About</a>
</li>
<li class="nav-item">
<a class="nav-link" (click)="scrollToAnchroingPosition('pricing')" href="javascript:void(0);">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
<!--about section starts-->
<section id="about">
<!--your code goes here-->
</section>
<!--about section ends-->
<!--pricing section starts-->
<section id="pricing">
<!--your code goes here-->
</section>
<!--pricing section ends-->
// .ts file
constructor(
private viewportScroller: ViewportScroller
) { }
ngOnInit(): void {
}
public scrollToAnchroingPosition(elementId: string): void {
this.viewportScroller.scrollToAnchor(elementId);
}
In the given HTML and TypeScript files, there’s an implementation for a navigation bar and an Angular component that utilizes the ViewportScroller
to achieve smooth scrolling to specific sections on the page.
HTML (Navbar):
- The HTML file contains a Bootstrap-based navigation bar (
nav
element) with a logo, a toggle button for responsiveness, and a collapsible navigation menu. - Inside the navigation menu (
ul
with classnavbar-nav
), there are three list items (li
elements) representing different sections: “Home,” “About,” and “Pricing.” - Each section link has an associated click event (
(click)="scrollToAnchroingPosition('about')"
) calling thescrollToAnchroingPosition
method defined in the TypeScript file.
HTML (Sections):
- Following the navigation bar, there are two sections defined by
section
elements with the IDs “about” and “pricing.” These sections represent the content that the user will scroll to.
TypeScript (ViewportScroller):
- The TypeScript file contains a class with a constructor that injects the
ViewportScroller
service. - The
ngOnInit
method is present, but currently, it is empty. This method is typically used for initialization logic when the component is created. - The class includes a method named
scrollToAnchroingPosition
that takes anelementId
parameter and uses thescrollToAnchor
method ofViewportScroller
to navigate to the specified anchor on the page.
Explanation:
- The navigation bar provides links to different sections on the page, and clicking on these links triggers the
scrollToAnchroingPosition
method. - The
scrollToAnchroingPosition
method uses theViewportScroller
service to smoothly scroll to the specified section with the givenelementId
. - This implementation allows for a user-friendly and visually appealing navigation experience, especially when dealing with single-page applications or long-scrolling websites.
Keywords: angular viewportscroller example, viewportscroller angular example, angular viewportscroller, angular anchor scroll, anchor scroll angular, anchor scrolling angular, angular anchor scrolling.
Pingback: How to check angular CLI version in command prompt - Sajan K.C.