相关疑难解决方法(0)

我想要实现的是点击并平滑滚动到底部/指定的div区域,我用hashtag定义就像我认为它应该是这样的.

这是w3school示例中为JQuery编写的实例:https://www.w3schools.com/jquery/tryit.asp ？ filename = tryjquery_eff_animate_smoothscroll

我做的是从这个答案中窥视:Angular2使用Hashtag路由到页面锚点

但我真的不明白答案,答案看起来像这样:

这部分是HTML部分:

<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

在这之下,router.navigate是我应该把代码放在哪里？component.ts对吗？但我如何访问此功能？我应该实施(点击)？

this._router.navigate( ['/somepath', id ], {fragment: 'test'});

在这之下,我得到它,它应该写在我的component.ts:

** Add Below code to your component to scroll**

  import {ActivatedRoute} from '@angular/router'; // <-- do not forget to import

  private fragment: string;

  constructor(private route: ActivatedRoute { }

  ngOnInit() {
    this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
  }

  ngAfterViewInit(): void {
    try {
      document.querySelector('#' + this.fragment).scrollIntoView();
    } catch (e) { }
  }

什么是"somepath"是什么意思？我应该在我的路线中添加路线.对吗？通常,我在这里添加一个新的路径,例如: …

在过去的两天中，我一直在Internetz上挖掘有关将片段滚动到具有角度的视图中的信息。

假设我们有一个静态网页，其中包含一堆充当片段的ID。并具有一个侧面导航栏，可通过链接浏览片段。

我试过路由器anchorScroll只需添加这对模块无所事事的我。它只是为您提供URL中的片段，但没有滚动。

我已经尝试过viewportScroller。这样做的主要问题是它第一次无法使用（例如：如果您一直在同一页面上并重复该过程，则将您重定向到具有所需片段的静态页面，但滚动不会发生） ，如果您单击导航栏旁边具有与您访问的URL相同的URL的链接，则它起作用： ([foo]/[bar]#[fragment])由于导航没有更改，它也不起作用。

用于路由器的其他选项：

const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  scrollPositionRestoration: 'enabled',
  onSameUrlNavigation: 'reload'
};

ps .： useHash：true不会改变。

ngOnInit中的viewportScroller：

this.viewportScroller.setOffset([0, 64]);
this.viewportScroller.setHistoryScrollRestoration('auto');

this.router.events.pipe(filter(element => element instanceof Scroll)).subscribe((element: any) => {
  console.log(element)
  this.viewportScroller.scrollToAnchor(element.anchor);
});

没有滚动到片段的最简单方法是什么！！！使用这个：

ngOnInit() {
  this.route.fragment.subscribe((fragment: string) => { 
    if (fragment && document.getElementById(fragment) != null) {
      document.getElementById(fragment).scrollIntoView({ behavior: "smooth" });
    }
  });
}

b / c每次都能使用，但不是TS，因为我们在公司的项目中使用TS。

请帮帮我