Question

我有一个带有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);
      }
    }

问题是特定元素的offset（）。top-150在多次切换标签后会改变，并且第一次重定向到正确的元素，但在此之后，页面将随机跳转到不同的元素。

我已经附上了控制台的打印屏幕。

console screenshot

有什么建议吗？谢谢！

Answer 1

您不必计算任何价值来做您想做的事情，也不必使用JavaScript。至少，因为你不想平滑滚动。

您可以轻松滚动到任何元素，并将其设置为href属性：

<a href="#my_id" id="my_link">Click me to scroll down</a>

...

<section id="my_id">...</section>

好的，根据您的评论，在执行此操作时与角度路由器存在冲突，因此只需使用一点JavaScript即可解决问题：

document.getElementById("my_link").addEventListener("click",(e)=>{
    e.preventDefault();
    document.querySelector(e.currentTarget.href).scrollIntoView();
});

Answer 2

快速解答：

element = document.getElementById("message");
element.scrollIntoView();

Javascript按ID滚动到特定元素

2 个答案: