Scroll to a certain element of the current page in Angular 4

问题

Upon clicking a button (which is bottom of the page), I want to go to a certain element (in my case, #navbar) which is in the top of the current page, but I don't know how to do it. I've tried the following code with no avail.

<nav class="navbar navbar-light bg-faded" id="navbar">
    <a class="navbar-brand" href="#">
        {{appTitle}}
    </a>
    <!-- rest of the nav link -->
</nav>
<!-- rest of the page content -->

<!-- bottom of the page -->
<button class="btn btn-outline-secondary" (click)="gotoTop()">Top</button>

In angular component:

import { Router } from '@angular/router';
 /* rest of the import statements  */
export class MyComponent {
   /* rest of the component code */
    gotoTop(){
       this.router.navigate([], { fragment: 'navbar' });
    }
}

I would really appreciate if someone helped me out with a solution and explained why my code hadn't worked.

Please note that element (navbar) is in other component.

回答1:

You can do this with javascript:

gotoTop() {
  let el = document.getElementById('navbar');
  el.scrollTop = el.scrollHeight;
}

This will bring the DOM element with id="navbar" into view when the method is called. There's also the option of using Element.scrollIntoView. This can provide a smooth animation and looks nice, but isn't supported on older browsers.

If the element is in a different component you can reference it several different ways as seen in this question.

The easiest method for your case would likely be:

import { ElementRef } from '@angular/core'; // at the top of component.ts

constructor(myElement: ElementRef) { ... } // in your export class MyComponent block

and finally

gotoTop() {
  let el = this.myElement.nativeElement.querySelector('nav');
  el.scrollIntoView();
}

Working plunker.

回答2:

I know, you want to scroll to a specific element in the page. But, if the element is in the top of the page, then you can use the following:

window.scrollTo(0, 0);

回答3:

I think your way didn't work because of the empty router.

this.router.navigate(['/home'], { fragment: 'top' });

would work if 'home' is declared as a route and you have the id="top" element on it.

I know you would like it to be "pure Angular way", but this should work (at least):

gotoTop(){
  location.hash = "#navbar";
}

来源：https://stackoverflow.com/questions/45742611/scroll-to-a-certain-element-of-the-current-page-in-angular-4

标签

javascript

angular

angular2-routing