锚滚动只适用于角6的第二次点击。
锚滚动只适用于角6的第二次点击。
提问于 2018-10-19 05:16:57
我在一个很长的页面上有一个非常基本的设置：
<a href="/technicalmanagerreport/4e8485d9-5751-4684-9d24-0af2934dd390#h2">test</a>
<h2 id="h2">LOL</h2>当我第一次点击链接，它跳下来非常快，然后回到顶部。第二次成功了。如果我点击链接，然后再点击另一个链接，然后再次链接相同的行为。所以它需要连续两次点击。有什么想法或者工作吗？？
在进一步挖掘之后：
<a href="technicalmanagerreport/4e8485d9-5751-4684-9d24-0af2934dd390#lol">test</a>
<div *ngFor="let group of report?.assetGroups">
<div><a href="technicalmanagerreport/4e8485d9-5751-4684-9d24-0af2934dd390#{{group?.code}}">{{group.name}}</a></div>
</div>
<div *ngFor="let group of report?.assetGroups">
<div id="{{group?.code}}">{{group?.name}}</div>
<div *ngFor="let subGroup of group?.assetSubGroupList">
<h4>{{subGroup.name}}</h4>
</div>
</div>
<div id="lol">lol</div>测试链接按预期工作。它是否与调用REST服务(即异步调用)中的其他值有关？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-06-22 14:31:59
解决此问题的唯一解决方案是用setTimeOut函数包装滚动函数。虽然这不是一个最佳实践，但这种方法确实解决了它。
scroll(link: string) {
window.location.href = this.href + '#' + link;
setTimeout(() => {document.querySelector('#' + link).scrollIntoView()}, 0);}
Stack Overflow用户
发布于 2018-10-19 05:49:37
从技术上讲，我无法重新创建这个问题，但可能的原因可能是您没有正确地实现HashLocationStrategy，或者可能使用了本文中提到的PathLocationStrategy：角路由导航
这方面的工作可能是
备选案文1:使用片段
在HTML文件中
<a [routerLink]="['/']" fragment="h2"></a>在你的打字记录文件中
ngOnInit() {
this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
}
ngAfterViewChecked(): void {
try {
if(this.fragment) {
document.querySelector('#' + this.fragment).scrollIntoView();
}
} catch (e) { }
}选项2:只需创建方法并滚动
在HTML文件中
<button (click)="scroll(target)"></button>
<div #target>Your target</div>在.ts文件中
scroll(el) {
el.scrollIntoView({ behavior: "smooth"});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52886234
复制相关文章
相似问题
腾讯云开发者
