时间戳

首页 > 解决方案 > Angular 8滚动到片段，不会将片段带到页面顶部

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

问题描述

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

我尝试使用带有 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不真实的解决方案。

标签： angulartypescriptangular-router

解决方案

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

HTML：

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

TS：

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

也许这对你有帮助。

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

推荐阅读