Angular 8 scroll to a fragment, doesn't bring the fragment to the top of the page

问题

I have a link, by clicking on the link, I want to scroll to a fragment which is at the bottom of the page. When I click on the link, the fragment is working, but it doesn't bring it to the top of the page.

I tried having the using div and section with an id to create the fragment. But, it doesn't bring the div or section to the top of the page.

The code in my app routing module is:

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

My component code for link and fragment:

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

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

Note, I have tried using useHash:true, but it doesn't seem to work. I would prefer a solution without useHash to be true.

回答1:

I use code like this to scroll to element:

HTML:

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

TS:

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

Maybe this helps you.

Remember: to page scroll to element, page must have sufficient contents do generate a scroll/scrollbar, otherwise does not have content to scroll.

回答2:

I had the same situation and here is what I done:

This is the link on my menu component:

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

And this is how it is declared on my Product component... product.component.html

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

product.component.css

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

product.component.ts:

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

Have in count that the top attribute of CSS is equivalent of size of menu. On this way, when the scroll happens, it should display the anchored element just below the menu div.

I hope it helps...

来源：https://stackoverflow.com/questions/57962061/angular-8-scroll-to-a-fragment-doesnt-bring-the-fragment-to-the-top-of-the-pag

标签

angular

typescript

angular-router