Smooth scrolling to same-page element

#angular #webdev

I decided to condense my portfolio site into a single page pretty much because I felt I didn't need that much space. There are various ways, as with most things, I could have gone with but ultimately decided to go with the ngx-scroll-to package.

To begin, install the package into your project folder npm i @nicky-lenaers/ngx-scroll-to and then into the AppModule file.

import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';

@NgModule({
  imports: [ 
    ScrollToModule.forRoot()
  ]
})

navbar.component.html

 <ul class="navbar-nav ml-auto">
      <li class="nav-item"><a class="nav-link" [ngxScrollTo]="'home'" [ngxScrollToEasing]="'easeInOutQuad'"><fa-icon [icon]="faHome"></fa-icon></a></li>
      <li class="nav-item"><a class="nav-link" [ngxScrollTo]="'about'" [ngxScrollToEasing]="'easeInOutQuad'">About</a></li>
      <li class="nav-item"><a class="nav-link" [ngxScrollTo]="'dev'" [ngxScrollToEasing]="'easeInOutQuad'">Dev</a></li>
      <li class="nav-item"><a class="nav-link" [ngxScrollTo]="'blog'" [ngxScrollToEasing]="'easeInOutQuad'">Blog</a></li>
      <li class="nav-item"><a class="nav-link" [ngxScrollTo]="'projects'" [ngxScrollToEasing]="'easeInOutQuad'">Projects</a></li>
      <li class="nav-item"><a class="nav-link" [ngxScrollTo]="'contact'" [ngxScrollToEasing]="'easeInOutQuad'">Contact</a></li>
    </ul>

about.component.html

<div id="about" #about> <!-- ✨ -->
  <div class="container">
    <div class="row"> 
      <div class="col-lg-6"> 
        <button [ngxScrollTo]="'contact'" [ngxScrollToEasing]="'easeInOutQuad'" alt="Send message">Send message</button> <!-- ✨ -->
      </div>
    </div>
  </div>
</div>

I need to play around with more setting i.e. easing, but so far enjoying it. It was simple enough to add in where needed, does the job nicely! 🤗