Inside bootstrap modal scroll to specific element is not working

Question

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

 $('#centralModalLg').on('show.bs.modal', function() {
        $( "#elementId" ).scrollTop(0);

   });

Updated:

when i open modal window at first time and scroll to the specific area.look at the below the screen shot

when open modal second time. the scoll should go the top but i got where i stoped last time.

Html:


    
        
        
            

                
                    
                        

                        {{productDetails?.productName}}
                            
                              
                            
                            
                                     
                             
                        
                        
                            

                            



                            

                            
                                {{ productDetails?.productDesc }}
                            
                            
                            
                                {{addonCate.CategoryType}}
                                
                                    {{addonCate?.addonsCategoryName}}({{addonCate?.addonsCategoryDesc}}) 
                                        Required
                                    {{addonCate?.errorMsg}}

                                
                                
                                    
                                        
                                            
                                                    
                                                    
                                                    
                                                        {{addonCateList.addonsCategoryEntryName}}
                                                    
                                                
                                        
                                        
                                            $ {{addonCateList.addonsCategoryEntryPrice}}
                                        
                                        
                                            
                                                
                                                
                                                


                                                {{addonCateList.errorMsg}}
                                            
                                        
                                    
                                
                                
                                    
                                        
                                            {{addonCateList.addonsCategoryEntryName}}
                                            
                                        
                                        
                                            $ {{addonCateList.addonsCategoryEntryPrice}}
                                        
                                        
                                            
                                                
                                                
                                                


                                                {{addonCateList.errorMsg}}
                                            
                                        
                                    
                                
                            
                        
                    

                
                
                    
                
                
                
                    Choose Quantity
                    
                        {{outletDetials?.currency}}
                            {{productDetails.cost}}
                            0
                        
                    
                    
                        
                        
                        
                    
                

            
            
                
                    
                        
                            Total:
                            {{outletDetials?.currency}}
                                        {{productDetails.totalPrice}}
                                        0

How i can achieve this

Thanks in advance

user_6584883 · Answer

Change "show" to "shown" when did you use bootstrap 3 or 4

$('#centralModalLg').on('shown.bs.modal', function() {
        $( "#elementId" ).scrollTop(0);
});

check that Bootstrap 3 codepen example

check that Bootstrap 4 codepen example

user_8528669 · Answer

$('#centralModalLg').on('shown.bs.modal', function() {
    $('#elementId').scrollTop(0); 
});

A Fiddle with your code.

EDIT: The issue is caused by the event listener, should be shown.bs.modal instead of show.bs.modal, updated the fiddle as well.

jQuery.scrollTop() could be conflicting if the event is started but not yet completed as of Bootstrap's official documentation :

the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is triggered on the completion of an action.

user_8164758 · Answer

try this:

$('#centralModalLg').on('show.bs.modal', function() {

    setTimeout(function() {
    var $elem = $('#scrollto') // add this ID to an element you want scroll to
    var $container = $("#elementId")
    $container.scrollTop(0) // edge case - reset scroll in case it is reopened
    var t = $container.offset().top
    $container.scrollTop($elem.position().top - t);
    }, 500) // run after modal animation 
});

It is based on this answer: https://stackoverflow.com/a/21179878/8164758

Here is working jsfiddle example: https://jsfiddle.net/954jnt2y/1/

Inside bootstrap modal scroll to specific element is not working

3 Answers