在 Angular 4 中滚动到当前页面的某个元素 [英] Scroll to a certain element of the current page in Angular 4
问题描述
点击一个按钮(页面底部)后,我想转到当前页面顶部的某个元素(在我的例子中,#navbar),但我不知道如何做吧.我试过以下代码无济于事.
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>
在角度分量中:
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.
推荐答案
您可以使用 javascript 做到这一点:
You can do this with javascript:
gotoTop() {
let el = document.getElementById('navbar');
el.scrollTop = el.scrollHeight;
}
这将在调用该方法时将带有 id="navbar"
的 DOM 元素带入视图.还可以选择使用 Element.scrollIntoView.这可以提供流畅的动画并且看起来不错,但在较旧的浏览器上不受支持.
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.
最简单的方法可能是:
import { ElementRef } from '@angular/core'; // at the top of component.ts
constructor(myElement: ElementRef) { ... } // in your export class MyComponent block
最后
gotoTop() {
let el = this.myElement.nativeElement.querySelector('nav');
el.scrollIntoView();
}
这篇关于在 Angular 4 中滚动到当前页面的某个元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!