web-dev-qa-db-fra.com

Faites défiler jusqu'à un certain élément de la page en cours dans Angular 4

Lorsque je clique sur un bouton (au bas de la page), je souhaite accéder à un certain élément (dans mon cas, #navbar) situé en haut de la page actuelle, mais je ne sais pas comment le faire. J'ai essayé le code suivant sans succès. 

<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>

En composante angulaire: 

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

J'apprécierais vraiment que quelqu'un m'aide avec une solution et explique pourquoi mon code n'a pas fonctionné. 

Veuillez noter que l'élément (barre de navigation) est dans un autre composant. 

javascriptangularangular2-routing
4
asmmahmud

Vous pouvez le faire avec javascript:

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

Ceci affichera l'élément DOM avec id="navbar" lors de l'appel de la méthode. Il y a aussi l'option d'utiliser Element.scrollIntoView . Cela peut donner une animation fluide et une apparence agréable, mais n'est pas pris en charge par les anciens navigateurs.

Si l'élément est dans un composant différent, vous pouvez le référencer de différentes manières, comme indiqué dans cette question .

La méthode la plus simple pour votre cas serait probablement:

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

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

et enfin 

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

Plunker de travail.

6
Z. Bagley

Je sais que vous voulez faire défiler jusqu'à un élément spécifique de la page. Toutefois, si l'élément se trouve en haut de la page, vous pouvez utiliser les éléments suivants:

window.scrollTo(0, 0);
1
user4623051

Je pense que votre chemin n'a pas fonctionné à cause du routeur vide.

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

fonctionnerait si 'home' est déclaré en tant que route et que vous avez l'élément id = "top" dessus.

Je sais que vous voudriez que ce soit "pure Angular way", mais cela devrait fonctionner (au moins):

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