על מנת לייצר חוויה למשתמש אין צורך לעשות משהו מאוד גרנדיוזי . לרוב, המשתמש שלכם יחווה חוויה דווקא בשימושים קטנים למשל, אם אתם רוצים שהגולש ילחץ על כפתור כלשהו, או יעשה פעולה שתגובתה תגלול את המסך לנקודה אחרת בדף, אז אם "תקפיצו" את הדף לעוגן זה (anchor) אז היוזר יחוש מבולבל מעט . עדיף לייצר לו סקול נעים בתנועה ואין ספק שזה יסב לו סוג של אושר (לפחות שאני נתקל באיזה סקול נעים זה עושה לי טוב😊)
אנגולר חשבו על זה עוד לפנינו ופיתחו – viewportScroller
סופר פשוט וקל . שווה לנסות ולאמץ לכל פרויקט.
import { ViewportScroller } from '@angular/common'; @Component({ selector: 'app-component', templateUrl: './mycomponent.component.html' }) export class MyComponent { constructor(private viewportScroller: ViewportScroller) {} public onClick(elementId: string): void { this.viewportScroller.scrollToAnchor(elementId); }
<a (click)="onClick('AnchorId')">לחצו עליי!</a> <a (click)="onClick('OtherAnchorId')">לחצו גם עליי!</a> <div id="AnchorId"></div> <div id="OtherAnchorId"></div>
ועוד פרט חשוב בשביל שזה יעבוד, צריך להגדיר את anchorScrolling בקובץ routing.
@NgModule { imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled'})] }
זהו זה! . טריק נחמד מאוד ושימושי. בהצלחה!