DEV Community

Lorna Watson
Lorna Watson

Posted on

1 2

Smooth scrolling to same-page element

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()
  ]
}) 
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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! 🤗

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay