Pesquisa de site

typescript - Angular 8 rolar para um fragmento, não traz o fragmento para o topo da página

Eu tenho um link, ao clicar no link, quero rolar para um fragmento que está na parte inferior da página. Quando clico no link, o fragmento funciona, mas não o traz para o topo da página.

Eu tentei usar div e section com um id para criar o fragmento. Mas, isso não traz a div ou section para o topo da página.

O código no módulo de roteamento do meu aplicativo é:

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

Meu código de componente para link e fragmento:

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

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

Observe, tentei usar useHash:true, mas parece que não funciona. Eu preferiria uma solução sem que useHash seja verdadeiro.

Resposta #1

Eu uso código assim para rolar até o elemento:

HTML :

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

TS :

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

Talvez isso te ajude.

Lembre-se: para rolar a página até o elemento, a página deve ter conteúdo suficiente para gerar uma rolagem/barra de rolagem, caso contrário não há conteúdo para rolar.

Resposta #2

Eu tive a mesma situação e aqui está o que eu fiz:

Este é o link no meu componente de menu:

<a class="dropdown-item" routerLink="/products" fragment="product-one">Product One</a>

E é assim que é declarado no meu componente Product... product.component.html

  <div class="anchor">
    <a name="product-one"></a>
    <h2 >Product One</h2><br>
  </div>

produto.componente.css

.anchor a {
    position: absolute;
    left: 0px;
    top: -10em;
  }
.anchor {
    position: relative;
  }

produto.componente.ts:

  //TODO: Needs to verify if is necessary to declare Router and ActivatedRoute
  constructor( router: Router,
    private route:ActivatedRoute,) {
   }

Tenha em mente que o atributo top do CSS é equivalente ao tamanho do menu. Dessa forma, quando a rolagem acontecer, ele deve exibir o elemento ancorado logo abaixo do div do menu.

Espero que ajude...

Artigos relacionados