Angular 8滚动到片段，不会将片段带到页面顶部

Question

我有一个链接，通过单击该链接，我想滚动到页面底部的一个片段。当我单击该链接时，该片段正在工作，但它不会将其带到页面顶部。

我尝试使用 div 和带有 id 的部分来创建片段。但是，它不会将 div 或部分带到页面顶部。

我的应用程序路由模块中的代码是:

 imports: [
    RouterModule.forRoot(routes, {
    //useHash: true,
    scrollPositionRestoration: 'enabled',
    onSameUrlNavigation: 'reload',
    anchorScrolling: 'enabled'
  })]

我的链接和片段的组件代码:

<a [routerLink]="['/proposal']" fragment="dcn">{{ dcn }}</a>

<section id="dcn">
Some other html here
</section>

注意，我尝试过使用 useHash:true ，但它似乎不起作用。我更喜欢没有 useHash 的解决方案是真实的。

Answer 1

我使用这样的代码滚动到元素:

HTML:

<button (click)="scroll(target)"></button>
<div #target>Your target</div>

TS:

scroll(el: HTMLElement) {
    el.scrollIntoView();
}

也许这对你有帮助。

记住:要页面滚动到元素，页面必须有足够的内容才能生成滚动/滚动条，否则没有内容可以滚动。