How to implement Scroll animation in Angular 8 with rxjs 6?

Question

I have the current template:

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

In the component I have the following method:

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

This method scroll to top after finish save which works correctly. I need the scrollIntoView to not just scroll to top, I would make animation for that scroll. Please note that I'm using rxjs 6 so I need code with pipe I guess.

use a interval(100).pipe(takeWhile(()=>..!reach the top)).susbcribe(()=>move the top) ? — Eliseo, Jul 06 '19 at 14:25
I've tried to use your code with condition !(window.screenY == 0) and scroll with window.scrollTo(window.screenX, window.screenY-100) and nothing is moving. — user2304483, Jul 07 '19 at 02:07

Willie · Answer 1 · 2019-11-13T18:05:59.777

Have you looked into ngx-page-scroll?

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

this will allow you to only have to add one attribute and a target location to a link element, and reference a different element on the page.

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

Their documentation is straightforward to follow and worked for an application I needed it for.

user2304483 · Accepted Answer · 2019-07-07T02:16:03.130

-3

I prefer to use angular animation but for now I'm using jquery solution with the following:

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

I found the following solution but it's not valid rxjs 6 code: Angular 4 - Scroll Animation

edited Jul 07 '19 at 02:16

answered Jul 07 '19 at 02:08

user2304483

1,462
6
28
50

How to implement Scroll animation in Angular 8 with rxjs 6?

2 Answers2