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

Question

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

我尝试使用带有 id 的 div 和 section 来创建片段。但是，它不会将 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();
}

也许这对你有帮助。

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