typescript - Angular-formulär, hur man automatiskt scrollar till toppen efter att formuläret skickats framgångsrikt?

Jag kunde inte hitta en fungerande lösning för mitt Angular-formulär. I princip vill jag automatiskt scrolla tillbaka till toppen efter att mitt formulär har registrerats framgångsrikt.

Jag kan fånga inlämningen och återställa formuläret men har lite svårt att försöka scrolla tillbaka till toppen automatiskt efter att formuläret återställts.

Detta är min onSubmit()-funktion i min account-payable.component.ts:

onSubmit() {
    this.submitted = true;

    // stop here if form is invalid
    if (this.accountPayableForm.invalid) {
      return;
    }

    this.loading = true;
    this.accountPayableService
      .submitAccountPayable(this.accountPayableForm.value)
      .pipe(first())
      .subscribe(
        data => {
          this.alertService.success(
            'Success! Account payable created with reference ID: ' +
              data.valueOf(),
            true
          );
          this.loading = false;
          this.submitted = false;
          this.accountPayableForm.reset();
          this.goToTop();
        },
        error => {
          this.alertService.error(error);
          this.loading = false;
        }
      );
  }

Min goToTop()-funktion verkar inte fungera:

goToTop() {
    window.scroll({
      top: 0,
      left: 0,
      behavior: 'smooth'
    });
  }

Jag har försökt att ersätta this.goToTop(); med window.scrollTo(0,0); men det fungerar inte heller, mitt formulär stannar fortfarande längst ner och mitt meddelande om framgång visas ovanför formuläret och jag måste manuellt scrolla upp för att kontrollera efter inskick.

Några råd? Tack.

Svar #1

Om du bara vill scrolla till toppen, använd detta:

window.scrollTo(0,0);

Svar #2

försök :

document.querySelector("main").scrollTo(0, 0);

Där du ersätter "main" med vilket element som helst som du har omslutit kring <router-outlet>.

Du kunde inte använda fönster eftersom det troligen är så att du har nästat ditt <router-outlet> inuti ett annat element. I mitt program till exempel har jag omslutit ett <main>-element runt <router-outlet>:

därför måste jag välja <main>-elementet och rikta det för att scrolla till toppen.

Jag vet inte hur din app är strukturerad och jag tycker att det är slöseri med tid att be dig posta appens struktur. Undersök dina utvecklarverktygs Elements-flik (Chrome) eller Inspector-flik (Firefox) och rikta in dig på rätt element som har en definierad höjd (vilket tillät scrollning att ske; Obs: det kanske inte ens är ett element som omsluter router-outlet!). Du borde då kunna scrolla till toppen.

Du kan faktiskt testa document.querySelector("main").scrollTo(0, 0); i webbläsarens konsol för att se om du riktar in dig på rätt element och om scrollningen fungerar (ignorera undefined-svaret):

Relaterade artiklar