title: Inside bootstrap modal scroll to specific element is not working
body: <p>I have used boostrap modal.in that we need to use scroll to specific element. i tried by using below code.but doesn't works</p>
  
  <pre><code> $('#centralModalLg').on('show.bs.modal', function() {
          $( "#elementId" ).scrollTop(0);
  
     });
  </code></pre>
  
  <p><strong>Updated:</strong></p>
  
  <p>when i open modal window at first time and scroll to the specific area.look at the below the screen shot</p>
  
  <p><a href="https://i.stack.imgur.com/UW2va.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UW2va.png" alt="enter image description here"></a></p>
  
  <p>when open modal second time. the scoll should go the top but i got where i stoped last time.</p>
  
  <p><strong>Html:</strong></p>
  
  <pre><code>&lt;div class="modal fade" id="centralModalLg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"&gt;
      &lt;div class="modal-dialog" [ngClass]="{ 'modal-lg': productDetails?.imageUrl != null, 'modal-md': productDetails?.imageUrl == null}" role="document"&gt;
          &lt;!--Content--&gt;
          &lt;div class="modal-content" *ngIf="productDetails"&gt;
              &lt;div class="modal-body"&gt;
  
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-12"&gt;
                          &lt;button *ngIf="productDetails.imageUrl != null" type="button" id="closeProductModal" class="close" data-dismiss="modal" aria-label="Close"&gt;
                          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                        &lt;/button&gt;
  
                          &lt;h4&gt;{{productDetails?.productName}}
                              &lt;span&gt;
                                &lt;img *ngIf="!productDetails?.isVeg" alt="trending" class="w24" src="https://www.crashmeal.com/assets/images/icons/trending-m.png"&gt;
                              &lt;/span&gt;
                              &lt;span&gt;
                                       &lt;img  *ngIf="productDetails?.isVeg" alt="veg" class="w24" src="https://www.crashmeal.com/assets/images/icons/veg-m.png"&gt;
                               &lt;/span&gt;
                          &lt;/h4&gt;
                          &lt;div id="elementId" class="over-flow-md"&gt;
                              &lt;img *ngIf="productDetails.imageUrl != null" class="card-img-top" src="{{baseLogoUrl + productDetails?.imageUrl}}" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16654384883%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16654384883%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.7265625%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                                  data-holder-rendered="true"&gt;
  
                              &lt;button *ngIf="productDetails.imageUrl == null" type="button" id="closeProductModal" class="close" data-dismiss="modal" aria-label="Close"&gt;
                                  &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                                &lt;/button&gt;
  
  
  
                              &lt;!-- &lt;hr /&gt; --&gt;
  
                              &lt;p class="small pt-2"&gt;
                                  {{ productDetails?.productDesc }}
                              &lt;/p&gt;
                              &lt;hr /&gt;
                              &lt;div class="addons" *ngFor="let addonCate of productDetails?.addonsCategoryDataList;let addonIndex=index"&gt;
                                  &lt;h5 class="bg-light"&gt;{{addonCate.CategoryType}}&lt;/h5&gt;
                                  &lt;div class="row pb-1"&gt;
                                      &lt;div class="small col-12"&gt;&lt;strong&gt;{{addonCate?.addonsCategoryName}}({{addonCate?.addonsCategoryDesc}}) &lt;/strong&gt;
                                          &lt;span *ngIf="addonCate.addonType == 'required'" class="float-right pr-2 required"&gt;Required&lt;/span&gt;&lt;/div&gt;
                                      &lt;div id="errorElement" *ngIf="addonCate?.hasError" class="small col-12 form-error"&gt;{{addonCate?.errorMsg}}&lt;/div&gt;
  
                                  &lt;/div&gt;
                                  &lt;ul class="list-group mb-3" *ngIf="addonCate?.maxNoOfSelection &gt; 1 || addonCate?.maxNoOfSelection == null"&gt;
                                      &lt;li class="list-group-item px-0 d-flex justify-content-between lh-condensed" *ngFor="let addonCateList of addonCate?.addonsCategoryEntries;let addoncateIndex=index"&gt;
                                          &lt;div class="col-md-7 align-self"&gt;
                                              &lt;label class="checkbox-inline checkbox"&gt;
                                                      &lt;input class="form-check-input float-left mr-2" name="{{addonCateList.addonsCategoryEntryId}}" (change)="addOnAddRemove(addonIndex,addoncateIndex,addonCateList, $event,'checkbox')" [(ngModel)]="addonCateList.checkedValue"  type="checkbox"  value="option1" &gt;
                                                      &lt;span class="checkmark"&gt;&lt;/span&gt;
                                                      &lt;div class="checkbox-text"&gt;
                                                          &lt;h6 class="my-0"&gt;{{addonCateList.addonsCategoryEntryName}}&lt;/h6&gt;
                                                      &lt;/div&gt;
                                                  &lt;/label&gt;
                                          &lt;/div&gt;
                                          &lt;div class="col-md-2 align-self text-right"&gt;
                                              $ {{addonCateList.addonsCategoryEntryPrice}}
                                          &lt;/div&gt;
                                          &lt;div class="col-md-3 addprice"&gt;
                                              &lt;ng-container *ngIf="addonCateList.maxNoOfSelection &gt; 1 || addonCateList.maxNoOfSelection == null"&gt;
                                                  &lt;button [disabled]="addonCateList.maxNoOfSelection == addonCateList.quantity" (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'add')" class="btn-addRemove float-right" type="button"&gt; &lt;i class="fa fa-plus small"&gt;&lt;/i&gt; &lt;/button&gt;
                                                  &lt;input class="form-control input-addRemove float-right" min="{{addonCateList.minNoOfSelection}}" max="{{addonCateList.maxNoOfSelection}}" name="addonCateList_qty" [(ngModel)]="addonCateList.quantity" readonly type="number" aria-label="number" /&gt;
                                                  &lt;button (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'sub')" class="btn-addRemove float-right" type="button"&gt; &lt;i class="fa fa-minus small"&gt;&lt;/i&gt; &lt;/button&gt;
  
  
                                                  &lt;span id="errorElement" *ngIf="addonCateList.hasError"&gt;{{addonCateList.errorMsg}}&lt;/span&gt;
                                              &lt;/ng-container&gt;
                                          &lt;/div&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                                  &lt;ul class="list-group mb-3" *ngIf="addonCate?.maxNoOfSelection == 1"&gt;
                                      &lt;li class="list-group-item pr-0 d-flex justify-content-between lh-condensed" *ngFor="let addonCateList of addonCate?.addonsCategoryEntries;let addoncateIndex=index"&gt;
                                          &lt;div class="col-md-7 align-self"&gt;
                                              &lt;h6 class="my-0"&gt;{{addonCateList.addonsCategoryEntryName}}&lt;/h6&gt;
                                              &lt;input class="form-check-input" name="{{addonCate.CategoryType}}" (change)="addOnAddRemove(addonIndex,addoncateIndex,addonCateList, $event,'radio')" [checked]="addonCateList.checkedValue" type="radio"&gt;
                                          &lt;/div&gt;
                                          &lt;div class="col-md-2 align-self text-right"&gt;
                                              $ {{addonCateList.addonsCategoryEntryPrice}}
                                          &lt;/div&gt;
                                          &lt;div class="col-md-3 addprice"&gt;
                                              &lt;ng-container *ngIf="addonCateList.maxNoOfSelection &gt; 1 || addonCateList.maxNoOfSelection == null"&gt;
                                                  &lt;button [disabled]="addonCateList.maxNoOfSelection == addonCateList.quantity" (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'add')" class="btn-addRemove float-right" type="button"&gt; &lt;i class="fa fa-plus small"&gt;&lt;/i&gt; &lt;/button&gt;
                                                  &lt;input class="form-control input-addRemove float-right" min="{{addonCateList.minNoOfSelection}}" max="{{addonCateList.maxNoOfSelection}}" name="addonCateList_qty" [(ngModel)]="addonCateList.quantity" readonly type="number" aria-label="number" /&gt;
                                                  &lt;button (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'sub')" class="btn-addRemove float-right" type="button"&gt; &lt;i class="fa fa-minus small"&gt;&lt;/i&gt; &lt;/button&gt;
  
  
                                                  &lt;span id="errorElement" *ngIf="addonCateList.hasError"&gt;{{addonCateList.errorMsg}}&lt;/span&gt;
                                              &lt;/ng-container&gt;
                                          &lt;/div&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
                  &lt;div class="py-2"&gt;
                      &lt;input class="form-control" name="specialInstr" [(ngModel)]="productDetails.specialInstr" type="text" placeholder="Add Special Instructions for the Restaurant"&gt;
                  &lt;/div&gt;
                  &lt;hr /&gt;
                  &lt;div class="row addprice"&gt;
                      &lt;div class="price col-sm-7"&gt;Choose Quantity&lt;/div&gt;
                      &lt;div class="text-right col-sm-2 "&gt;
                          &lt;strong&gt;{{outletDetials?.currency}}
                              &lt;ng-container *ngIf="productDetails?.cost"&gt;{{productDetails.cost}}&lt;/ng-container&gt;
                              &lt;ng-container *ngIf="!productDetails?.cost || productDetails.cost == null"&gt;0&lt;/ng-container&gt;
                          &lt;/strong&gt;
                      &lt;/div&gt;
                      &lt;div class="text-right  col-sm-3 "&gt;
                          &lt;button class="btn-addRemove float-right" (click)="increase_decrease_qty(productDetails,'add')" type="button"&gt; &lt;i class="fa fa-plus small"&gt;&lt;/i&gt; &lt;/button&gt;
                          &lt;input readonly class="form-control input-addRemove float-right ng-untouched ng-pristine ng-valid" aria-label="number" min="1" name="quantity" [(ngModel)]="productDetails.quantity" type="number"&gt;
                          &lt;button class="btn-addRemove float-right" (click)="increase_decrease_qty(productDetails,'sub')" type="button"&gt; &lt;i class="fa fa-minus small"&gt;&lt;/i&gt; &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;div class="bg-light p-0 pb-2"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-6"&gt;
                          &lt;div class="mt-3 pl-3"&gt;
                              &lt;span class="pr-1"&gt;Total:&lt;/span&gt;
                              &lt;strong&gt;{{outletDetials?.currency}}
                                          &lt;ng-container *ngIf="productDetails?.totalPrice"&gt;{{productDetails.totalPrice}}&lt;/ng-container&gt;
                                          &lt;ng-container *ngIf="!productDetails?.totalPrice || productDetails.totalPrice == null"&gt;0&lt;/ng-container&gt;
                                      &lt;/strong&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6"&gt;
                          &lt;button [disabled]="add_cart_loading == 'adding'" type="button" (click)="addProductToCart(productDetails)" class="btn btn-primary pull-right mt-2 mr-4"&gt;
                                      &lt;span *ngIf="add_cart_loading != 'adding'"&gt;
                                        &lt;ng-container *ngIf="!update_product_status"&gt; Add to Cart &lt;/ng-container&gt;
                                        &lt;ng-container *ngIf="update_product_status"&gt;Update&lt;/ng-container&gt;
                                      &lt;/span&gt;
                                      &lt;span *ngIf="add_cart_loading == 'adding'"&gt;
                                        &lt;ng-container *ngIf="!update_product_status"&gt;Adding&lt;/ng-container&gt;
                                        &lt;ng-container *ngIf="update_product_status"&gt;Updating&lt;/ng-container&gt;
                                        &lt;i class="fa fa-spinner fa-spin"&gt;&lt;/i&gt;
                                      &lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--/.Content--&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How i can achieve this</p>
  
  <p>Thanks in advance</p>