在Angular 4中单击时滚动到元素

我希望能够在按下按钮时滚动到目标。我在想这样的事情。

<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示例，它仍然有效。有人可以提供一个不起作用的示例吗？

实际上，没有使用setTimeout或requestAnimationFrame或jQuery 的纯JavaScript方法即可完成此操作。

简而言之，在scrollView中找到要滚​​动到的元素，然后使用scrollIntoView。

el.scrollIntoView({behavior:"smooth"});

这是一个笨拙的人。

这是我使用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'});
  }

乔恩（Jon）有正确的答案，这可以在我的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>

在Angular中执行此操作的另一种方法是：

标记：

<textarea #inputMessage></textarea>

添加ViewChild()属性：

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

使用scrollIntoView()功能滚动到组件内部所需的任何位置：

this.inputMessageRef.nativeElement.scrollIntoView();

您可以使用下面的代码块滚动到视图上的任何元素ref。请注意，目标（elementref id）可以位于任何有效的html标记上。

在视图上（html文件）

<div id="target"> </div>
<button (click)="scroll()">Button</button>
 

  

在.ts文件上

scroll() {
   document.querySelector('#target').scrollIntoView({ behavior: 'smooth', block: 'center' });
}

您可以通过使用对角度DOM元素的引用来实现此目的，如下所示：

这是stackblitz中的例子

组件模板：

<div class="other-content">
      Other content
      <button (click)="element.scrollIntoView({ behavior: 'smooth', block: 'center' })">
        Click to scroll
      </button>
    </div>
    <div id="content" #element>
      Some text to scroll
</div>

在Angular中，您可以使用ViewChild和ElementRef：为您的HTML元素提供参考

<div #myDiv > 

在组件内部：

import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('myDiv') myDivRef: ElementRef;

您可以this.myDivRef.nativeElement用来了解您的元素

通过使用jQuery查找元素（例如document.getElementById(...)）并使用.focus()调用，我已经完成了您所要求的操作。

您可以使用jquery做到这一点：

ts代码：

    scrollTOElement = (element, offsetParam?, speedParam?) => {
    const toElement = $(element);
    const focusElement = $(element);
    const offset = offsetParam * 1 || 200;
    const speed = speedParam * 1 || 500;
    $('html, body').animate({
      scrollTop: toElement.offset().top + offset
    }, speed);
    if (focusElement) {
      $(focusElement).focus();
    }
  }

html代码：

<button (click)="scrollTOElement('#elementTo',500,3000)">Scroll</button>

将其应用于您要滚动的元素：

<div id="elementTo">some content</div>

这是一个stackblitz示例。