Angular 表单，如何在表单提交成功后自动滚动到顶部？

Question

我找不到适合我的 angular 表单的可行解决方案。基本上我希望在成功捕获我的表单后自动滚动回顶部。

我能够捕获提交并重置表单，但在重置表单后尝试自动滚动回顶部时遇到一些困难。

这是我在 account-payable.component.ts 中的 onSubmit() 函数：

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'
    });
  }

我尝试用 window.scrollTo(0,0); 替换 this.goToTop(); 但效果不佳，我的表单仍然位于底部，我的成功消息显示在表单上方，我必须提交后手动向上滚动查看。

有什么建议吗？谢谢。

Answer 1

如果您只想滚动到顶部，请使用：

window.scrollTo(0,0);

Answer 2

试试这个功能。

window.scroll(0,0);

勾选这个link

Window object in angular 5 service

这将有助于正确声明和使用 window 对象

Answer 3

尝试：

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

将 "main" 替换为 <router-outlet> 周围的任何元素。

您不能使用 window，因为您可能已将 <router-outlet> 嵌套在另一个元素中。例如，在我的程序中，我在 <router-outlet>:

周围包装了一个 <main> 元素

因此，我必须 select <main> 元素并将其定位为滚动到顶部。

我不知道你的应用程序是如何构建的，我认为问你 post 应用程序的结构是浪费时间。检查您的开发工具的 Elements 选项卡 (Chrome) 或 Inspector 选项卡 (firefox) 并 定位正确的元素具有定义的高度（允许滚动发生；注意：它甚至可能不是环绕路由器出口的元素！）。然后您应该可以滚动到顶部。

您实际上可以在浏览器的控制台中测试 document.querySelector("main").scrollTo(0, 0); 以查看您是否以正确的元素为目标并且滚动正在工作（忽略 undefined 响应）：

Angular 表单，如何在表单提交成功后自动滚动到顶部？

Angular form, how to scroll to top automatically after successful submission of form?

angular

typescript

angular-components

angular-forms