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! 🤗
Top comments (0)