Auto Scroll the element on Click?

Ionic Framework Ionic Angular
1

Hello Guys,

I want the element to be autoscroll on click.

Background - I have created a div having some height and it is set to auto scroll. Inside the div there are some elements . Let say there are 15 Elements inside the div and only some are visible .

So What I want to do is that On click on the element it auto scroll so that the invisible element get visible.

So how can I achive this , here is my code

 <ion-col size="3" class="ion-no-padding cat-list" style="position:fixed;left:0px;overflow: auto;height: 100%;">
        <div class="ion-text-center category-thumb active" (click)="scrollTo('section1')">
          <ion-icon src="assets/icon/heart-solid.svg"></ion-icon>
          <h6>Popular</h6>
        </div>
        <div class="ion-text-center category-thumb" (click)="scrollTo('section2')" >
          <ion-icon name="add"></ion-icon>
          <h6>Women Ethnic</h6>
        </div>
        <div class="ion-text-center category-thumb" (click)="scrollTo('section3')">
          <ion-icon name="add"></ion-icon>
          <h6>Men</h6>
        </div>
        <div class="ion-text-center category-thumb" (click)="scrollTo('section4')">
          <ion-icon name="add"></ion-icon>
          <h6>Women Western</h6>
        </div>
        <div class="ion-text-center category-thumb" (click)="scrollTo('section5')">
          <ion-icon name="add"></ion-icon>
          <h6>Kids</h6>
        </div>
        <div class="ion-text-center category-thumb" (click)="scrollTo('section6')">
          <ion-icon name="add"></ion-icon>
          <h6>Home & Kitchen</h6>
        </div>
        <div class="ion-text-center category-thumb" (click)="scrollTo('section7')">
          <ion-icon name="add"></ion-icon>
          <h6>Beauty & Health</h6>
        </div>
        <div class="ion-text-center category-thumb" (click)="scrollTo('section8')">
          <ion-icon name="add"></ion-icon>
          <h6>Jewellery & Accessories</h6>
        </div>
        <div class="ion-text-center category-thumb" (click)="scrollTo('section9')">
          <ion-icon name="add"></ion-icon>
          <h6>Bags & Footwear</h6>
        </div>
        <div class="ion-text-center category-thumb" (click)="scrollTo('section10')">
          <ion-icon name="add"></ion-icon>
          <h6>Electronics</h6>
        </div>
      </ion-col>

Thanks