scrollIntoView效果不好

时间:2018-07-20 11:07:49

标签: angular scroll anchor

我使用Angular,需要从一页转到另一页并转到锚点。所以我使用代码(您可以在下面看到),现在跳转不正确。这意味着,当我重定向到第二页时,它会滚动到本节的开头,我需要自己滚动才能查看整节。

第二页

ECO_AUTOWORDSELECTION

路由(我需要使用routerLink。不要建议我使用href)

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.scss']
})


export class HeroComponent implements OnInit {

  constructor(private translate: TranslateService, router: Router) {

    router.events.subscribe(s => {
      if (s instanceof NavigationEnd) {
        const tree = router.parseUrl(router.url);
        if (tree.fragment) {
          document.querySelector("#" + tree.fragment).scrollIntoView(true)}
        }

    });
  }


  ngOnInit() {

  }
}

锚看起来像

<a mat-button [routerLink]="['/']" fragment="anchor">Go to anchor</a>

要查看其工作原理,请转到http://beta-rev.azurewebsites.net,然后单击标题中的Blog->单击Blog标题中的体系结构或出版物,您便可以自己看到此内容

0 个答案:

没有答案
相关问题