我希望能够在按下按钮时滚动到目标。我在想这样的事情。
<button (click)="scroll(#target)">Button</button>
在我的component.ts一个方法中。
scroll(element) {
window.scrollTo(element.yPosition)
}
我知道上面的代码无效，只是为了表明我的想法。我刚刚开始学习 Angular 4，之前没有 Angular 经验。我一直在寻找类似的东西，但所有的例子都在 AngularJs 中，它与 Angular 4 有很大不同
你可以这样做：
<button (click)="scroll(target)"></button>
<div #target>Your target</div>
然后在您的组件中：
scroll(el: HTMLElement) {
el.scrollIntoView();
}
编辑：我看到评论指出由于元素未定义，这不再有效。我在 Angular 7 中创建了一个StackBlitz 示例，它仍然有效。有人可以提供一个不起作用的例子吗？
这是我如何使用 Angular 4 做到的。
模板
<div class="col-xs-12 col-md-3">
<h2>Categories</h2>
<div class="cat-list-body">
<div class="cat-item" *ngFor="let cat of web.menu | async">
<label (click)="scroll('cat-'+cat.category_id)">{{cat.category_name}}</label>
</div>
</div>
</div>
将此功能添加到组件中。
scroll(id) {
console.log(`scrolling to ${id}`);
let el = document.getElementById(id);
el.scrollIntoView();
}
在 Angular 7 中工作完美
HTML
<button (click)="scroll(target)">Click to scroll</button>
<div #target>Your target</div>
在组件中
scroll(el: HTMLElement) {
el.scrollIntoView({behavior: 'smooth'});
}
实际上有一种纯 javascript 方法可以在不使用setTimeoutorrequestAnimationFrame或 jQuery 的情况下完成此操作。
简而言之，在 scrollView 中找到要滚动到的元素，然后使用scrollIntoView.
el.scrollIntoView({behavior:"smooth"});
这是一个plunkr。
Jon 有正确的答案，这适用于我的 angular 5 和 6 项目。
如果我想单击以从导航栏平滑滚动到页脚：
<button (click)="scrollTo('.footer')">ScrolltoFooter</button>
<footer class="footer">some code</footer>
scrollTo(className: string):void {
const elementList = document.querySelectorAll('.' + className);
const element = elementList[0] as HTMLElement;
element.scrollIntoView({ behavior: 'smooth' });
}
因为我想从页脚滚动回页眉，所以我创建了一个该函数所在的服务，并将其注入导航栏和页脚组件，并在需要的地方传入“页眉”或“页脚”。只记得给组件声明实际使用的类名：
<app-footer class="footer"></app-footer>