我如何实现一个渐渐滚动的viewportscroller机智?

时间:2019-01-30 11:12:25

标签: angular scroll anchor

我在我的角度应用程序中创建了一个viewportscroller,但滚动器并未逐步完成,我不知道为什么要使用activate.fragment,但是第一个锚点的滚动效果很好,但是之后没有滚动效果

constructor(privaterouter : Router,
    privateviewportScroller: ViewportScroller) {

    this.router.events.pipe(filter(e=> e instanceof Scroll)).subscribe((e:any) => {

        setTimeout(()=>{
            if (e.position) {
                this.viewportScroller.scrollToPosition(e.position);
            } else
                if (e.anchor) {
                    this.viewportScroller.scrollToAnchor(e.anchor);
                } 
                else {
                    this.viewportScroller.scrollToPosition([0,0]);
                }

       });

})}

当我必须使用我的html时:

<h1 id="step1">Step 1</h1>

<div> some elements</div>

<a [routerLink]="['/']" fragment="step1" class="b_step1" title="Back to step 1">&#94;</a>   

<h1 id="step2">Step 2</h1>

<div> some elements</div>

当我必须在我的js中使用它时:

this.router.navigate(['/'],{fragment :"step2"});

0 个答案:

没有答案