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

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);但效果不佳，我的表单仍停留在底部，并且我的成功消息显示在表单上方，提交后我必须手动向上滚动以检查。

有什么建议吗？谢谢。

score 2 · Accepted Answer

2

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

window.scrollTo(0,0);

于 2019-10-01T13:53:40.830 回答

score 2 · Accepted Answer

尝试：

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

在哪里用你包裹的任何元素替换“main” <router-outlet>。

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

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

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

您实际上可以document.querySelector("main").scrollTo(0, 0);在浏览器的控制台中进行测试，以查看您是否针对正确的元素并且滚动是否正常工作（忽略未定义的响应）：

score 0 · Accepted Answer

试试这个功能。

window.scroll(0,0);

检查此链接

Angular 5 服务中的窗口对象

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

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

3 回答 3

Related

Reference