Html 在angular2中显示和隐藏div时移到顶部

我在一个固定长度的div-Content div中有2个div。 contentdiv内部有两个div-div1和div2。 与Content div相比，这两个div都非常大。 用户可以滚动content div内的内容。 用户将阅读div1，然后单击div1中的按钮，然后我将取消隐藏div2并隐藏div1。 但每次显示div2底部时，不是顶部数据。 我如何确保当div1隐藏并且显示div2时，div2 top show会出现在content div中

任何帮助都将不胜感激

HTML代码-

<div class = "completeBody">
  <div class = "header">
  </div>
  <div class = "content">
    <div class = "content1" *ngIf="showContent1">
        <div>
            top
        </div>
        <div class="bottomPoint">
            bottom
            <button (click)="showContent2()">SHOW Content2</button>
        </div>
    </div>
    <div class = "content2" *ngIf="!showContent1">
        <div>
            top
        </div>
        <div class="bottomPoint">
            SEE NOW YOU ARE IN BOTTOM,I WANT THAT WHEN CONTENT2 SHOULD BECOME VISIBLE,ITS TOP SHOULD COME FIRST
        </div>
    </div>
  </div>
  <div class = "footer">
  </div>
</div>

打字脚本代码-

import {Component} from '@angular/core';

@Component({
    selector: 'app',
    templateUrl: 'app/apphtml.html',
    styleUrls: ['app/appcss.css'],
})
export class App {
  showContent1:boolean;

  constructor() {
    this.showContent1 = true;
  }
  showContent2()
  {
    this.showContent1 = false;
  }

}

---

这里是PLUNKER的链接-

方法是将滚动容器与viewchild绑定，然后获取该元素的本机属性并更新它

---

对于任何引用，请参见相同的plunker链接，该链接已更新。

方法是将滚动容器与viewchild绑定，然后获取该元素的本机属性并进行更新

---

有关任何参考，请参阅相同的plunker链接，该链接已更新。

请显示一些代码。在这种情况下，最好使用Plunker。共享您的代码您尝试过的内容请共享一些代码。检查一下。对于显示和隐藏div，您使用的是什么

hidden

或

*ngIf

？添加了代码。您似乎只需要滚动回div的顶部。我可以用角度为您提供解决方案，但不能用typescript。请显示一些代码。在这种情况下，最好使用Plunker。共享您的代码您尝试过的内容请共享一些代码。检查一下。对于显示和隐藏div，您使用的是什么

hidden

或

*ngIf

？添加了代码。您似乎只需要滚动回div的顶部。在angular中，我可以为您提供解决方案，但在typescript中则不行。

import {Component} from '@angular/core';

@Component({
    selector: 'app',
    templateUrl: 'app/apphtml.html',
    styleUrls: ['app/appcss.css'],
})
export class App {
  showContent1:boolean;

  constructor() {
    this.showContent1 = true;
  }
  showContent2()
  {
    this.showContent1 = false;
  }

}