typescript - چگونه در angular 4 به درستی بدون پلاگینها به انکور صفحه به صورت اسکرول نرم برویم؟

آنچه میخواهم به آن برسم این است که با یک کلیک به پایین/بخش مشخصی از دیو که با هشتگ تعریف میکنم، به صورت روان پیمایش شود، درست مانند چیزی که فکر میکنم باید اینگونه باشد.

در اینجا مثال زندهای در مثال W3Schools وجود دارد که برای JQuery نوشته شده است: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll

کاری که انجام میدهم این است که از این پاسخ نگاه میکنم: Angular2 Routing با هشتگ به نقطهٔ صفحه

اما من واقعاً جواب را نمیفهمم، جواب اینطور به نظر میرسد:

این بخش بخش HTML است :

<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

و پایین این، router.navigate جایی است که باید کد را قرار دهم؟ component.ts درست است؟ اما چگونه به این تابع دسترسی پیدا کنم؟ آیا باید (click) را پیادهسازی کنم؟

this._router.navigate( ['/somepath', id ], {fragment: 'test'});

و در زیر این، من متوجه شدم، که باید در component.ts من بنویسد:

** Add Below code to your component to scroll**

  import {ActivatedRoute} from '@angular/router'; // <-- do not forget to import

  private fragment: string;

  constructor(private route: ActivatedRoute { }

  ngOnInit() {
    this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
  }

  ngAfterViewInit(): void {
    try {
      document.querySelector('#' + this.fragment).scrollIntoView();
    } catch (e) { }
  }

«somepath» یعنی چه؟ من باید یک مسیر در routes.ts خود اضافه کنم، درست است؟ معمولاً من یک مسیر جدید اینجا اضافه میکنم، برای مثال مثل این:

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'product', redirectTo: '/product' },
  ...homeRoutes,
  ...productRoutes
];

آیا کسی میتواند کد نمونه کامل شامل HTML، مسیرها و کامپوننت را در اختیار من قرار دهد؟

پاسخ شماره ۱

من به دنبال یک راه حل مشابه بودم و سعی کردم از بسته ngx-scroll-to استفاده کنم و متوجه شدم که در نسخههای جدید انگولار (انگولار 6 به بالا) کار نمیکند، بنابراین تصمیم گرفتم به دنبال گزینه دیگری بگردم و راه حلی پیدا کردم که از scrollIntoView بومی مرورگر استفاده میکند و تا کنون به نظر میرسد بهترین راه حل باشد

کد HTML :

<button (click)="scrollToElement(target)"></button>
<div #target>Your target</div>

کد Ts :

scrollToElement($element): void {
    console.log($element);
    $element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }

پاسخ شماره ۲

راهحل فقط با CSS

html {
  scroll-behavior: smooth;
}

این حتی پس از جابجایی یا بارگذاری مجدد صفحه هم کار میکند.

لطفاً توجه داشته باشید که در IE، Edge یا Safari کار نمیکند.

پاسخ شماره ۳

شما میتوانید به سادگی این کار را در کامپوننت خود انجام دهید.

const element = document.querySelector("#destination")
if (element) element.scrollIntoView({ behavior: 'smooth', block: 'start' })

ارجاع: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView