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)