Javascript 按 ID 滚动到特定元素
Javascript scroll to specific element by ID
我有一个带有 4 个选项卡的菜单栏,当我按下每个选项卡时,它应该向下滚动到同一页面上的相应类别(特定 ID)。
这是菜单的代码:
template: `
<div class="action-container">
<div class="btn-group quick-navigation custom-group" role="group">
<a *ngFor="let section of sections" [scrollTo]="section.id" (click)="active = section.id"
class="btn btn-secondary" [class.active]="section.id == active">{{section.name}}</a>
</div>
</div>
`,
而这个是滚动指令:
@Directive({
selector: '[scrollTo]'
})
export class ScrollToDirective {
@Input() scrollTo: string;
@HostListener('click', ['$event']) onClick(e) {
console.log(this.scrollTo);
console.log($(`#${this.scrollTo}`).offset().top - 150);
$('html, body').animate({
scrollTop: $(`#${this.scrollTo}`).offset().top - 150
}, 500);
}
}
问题是多次切换tabs后某个元素的offset().top-150会发生变化,第一次会重定向到正确的元素,但之后页面会随机跳转到不同的元素。
我附上了控制台的打印屏幕。
console screenshot
有什么建议吗?谢谢!
您无需计算任何值即可执行您想要的操作,并且根本不必使用 JavaScript。至少,因为你不想要平滑的滚动。
您可以轻松地滚动到任何带有 id 设置 href
属性的元素:
<a href="#my_id" id="my_link">Click me to scroll down</a>
...
<section id="my_id">...</section>
好的,根据您的评论,这样做时与 angular 的 Router 有冲突,所以用一点 JavaScript 就可以解决问题:
document.getElementById("my_link").addEventListener("click",(e)=>{
e.preventDefault();
document.querySelector(e.currentTarget.href).scrollIntoView();
});
快速回答:
element = document.getElementById("message");
element.scrollIntoView();
我有一个带有 4 个选项卡的菜单栏,当我按下每个选项卡时,它应该向下滚动到同一页面上的相应类别(特定 ID)。 这是菜单的代码:
template: `
<div class="action-container">
<div class="btn-group quick-navigation custom-group" role="group">
<a *ngFor="let section of sections" [scrollTo]="section.id" (click)="active = section.id"
class="btn btn-secondary" [class.active]="section.id == active">{{section.name}}</a>
</div>
</div>
`,
而这个是滚动指令:
@Directive({
selector: '[scrollTo]'
})
export class ScrollToDirective {
@Input() scrollTo: string;
@HostListener('click', ['$event']) onClick(e) {
console.log(this.scrollTo);
console.log($(`#${this.scrollTo}`).offset().top - 150);
$('html, body').animate({
scrollTop: $(`#${this.scrollTo}`).offset().top - 150
}, 500);
}
}
问题是多次切换tabs后某个元素的offset().top-150会发生变化,第一次会重定向到正确的元素,但之后页面会随机跳转到不同的元素。
我附上了控制台的打印屏幕。
console screenshot
有什么建议吗?谢谢!
您无需计算任何值即可执行您想要的操作,并且根本不必使用 JavaScript。至少,因为你不想要平滑的滚动。
您可以轻松地滚动到任何带有 id 设置 href
属性的元素:
<a href="#my_id" id="my_link">Click me to scroll down</a>
...
<section id="my_id">...</section>
好的,根据您的评论,这样做时与 angular 的 Router 有冲突,所以用一点 JavaScript 就可以解决问题:
document.getElementById("my_link").addEventListener("click",(e)=>{
e.preventDefault();
document.querySelector(e.currentTarget.href).scrollIntoView();
});
快速回答:
element = document.getElementById("message");
element.scrollIntoView();