如何使用 rxjs 6 在 Angular 8 中实现滚动动画？

Question

我有当前模板：

<div id="top">
...
</div>

在组件中我有以下方法：

onTripSave() {
    let top = document.getElementById('top');
    if (top !== null) {
      top.scrollIntoView();
      top = null;
    }  
  }

此方法在完成保存后滚动到顶部，工作正常。 我需要 scrollIntoView 不只是滚动到顶部，我会制作动画 为了那个卷轴。 请注意，我使用的是 rxjs 6，所以我猜我需要带管道的代码。

Answer 1

我更喜欢使用 angular 动画，但现在我使用 jquery 解决方案 以下：

$("html, body").animate({ scrollTop: 0 }, "slow");

我找到了以下解决方案，但它不是有效的 rxjs 6 代码：

Answer 2

你看过 ngx-page-scroll 了吗？

https://www.npmjs.com/package/ngx-page-scroll

这将允许您只需要向 link 元素添加一个属性和目标位置，并在页面上引用不同的元素。

<a pageScroll href="#monthlyDeals">Monthly Promos</a>
<!-- Content --->
<div id="monthlyDeals">(Content Goes Here)</div>

他们的文档易于理解，适用于我需要的应用程序。