(Chat app) scroll up content by touching textarea in the footer

Ionic Framework ionic-v3
1

How to scroll up my content when i touches textarea in the footer…(am creating chat app)
using ionic v3

2

What do you mean by touching text area? Here is an example using a button in footer to scroll up:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Home</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding #pageContent>
      <p *ngFor="let i of items">{{ i }}</p>
    </ion-content>
    <ion-footer>
      <ion-buttons end>
        <button ion-button clear icon-only (click)="pageContent.scrollToTop()">
          <ion-icon name="arrow-up"></ion-icon>
        </button>
      </ion-buttons>
    </ion-footer>
  `
})
export class HomePage {
  items = [];
  constructor(public navCtrl: NavController) {
    for (let i = 0; i < 10; i++) {
      this.items[i] = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
    }
  }
}
3

04%20PM%20(1)
WhatsApp Image 2018-02-16 at 2.47.04 PM (1).jpeg720×1280 66.1 KB
04%20PM
WhatsApp Image 2018-02-16 at 2.47.04 PM.jpeg720×1280 67.5 KB

"actually content scroll up only after typing text in the textarea "

4

How about this?

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Home</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding #pageContent>
      <p *ngFor="let i of items">{{ i }}</p>
    </ion-content>
    
    <ion-footer>
      <ion-toolbar>
        <ion-input 
          placeholder="Enter message..." 
          (keyup)="pageContent.scrollToTop()"
        ></ion-input>
        <ion-buttons end>
          <button ion-button clear icon-only>
            <ion-icon name="send"></ion-icon>
          </button>
        </ion-buttons>
      </ion-toolbar>
    </ion-footer>
  `
})
export class HomePage {
  items = [];
  constructor(public navCtrl: NavController) {
    for (let i = 0; i < 10; i++) {
      this.items[i] = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
    }
  }
}