Blog

Sharing is caring!

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.

1. setOffset()
2. getScrollPosition()
3. scrollToPosition()
4. scrollToAnchor()
5. 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 class navbar-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 the scrollToAnchroingPosition 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 an elementId parameter and uses the scrollToAnchor method of ViewportScroller 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 the ViewportScroller service to smoothly scroll to the specified section with the given elementId.
• 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.

Sharing is caring!