Угловая форма, как автоматически прокрутить вверх после успешной отправки формы?

Question

Я не мог найти подходящее решение для моей угловой формы. По сути, я хочу автоматически прокручивать страницу вверх после того, как моя форма была успешно захвачена.

Я могу перехватить отправку и сбросить форму, но у меня возникают некоторые трудности при попытке автоматически прокрутить страницу вверх послесброс формы.

Это моя onSubmit() функция в моей 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;
        }
      );
  }

Моя goToTop() функция не работает:

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

Я пытался заменить this.goToTop(); на window.scrollTo(0,0);, но он также не работает, моя форма по-прежнему остается внизу, а мое сообщение об успехе отображается над формой, и мне придется вручную прокрутить вверх, чтобы проверить послепредставление.

Любой совет? Благодаря.

Answer 1

try:

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

Где вы заменяете "main" на любой элемент, который вы обернули вокруг <router-outlet>.

Вы не можете использовать window, потому что скорее всего вы вложиливаш <router-outlet> внутри другого элемента. Например, в моей программе я обернул элемент <main> вокруг <router-outlet>:

, следовательно, мне нужно выбрать <main> и наведите курсор на него, чтобы прокрутить вверх.

Я не знаю, как структурировано ваше приложение, и я думаю, что просить вас опубликовать структуру приложения - пустая трата времени. Изучите вкладку Элементы ваших инструментов разработчика (Chrome) или вкладку Инспектор (Firefox) и цель для нужного элемента с определенной высотой (что позволило прокрутку происходить; Примечание: это может даже не быть элемент, который оборачивается вокруг роутера!). Тогда вы сможете прокрутить вверх.

На самом деле вы можете проверить document.querySelector("main").scrollTo(0, 0); в консоли браузера, чтобы увидеть, нацелен ли вы на нужный элемент и работает ли прокрутка (игнорируйте undefined ответ):

Answer 2

Если вы просто хотите прокрутить вверх, используйте это:

window.scrollTo(0,0);

Answer 3

Попробуйте эту функцию.

window.scroll (0,0);

Проверить эту ссылку

Объект Window в угловых 5 сервисах

Это будетпомощь в правильном объявлении и использовании объекта окна