頁面滾動到模態彈出式菜單的頂部

Question

我正在使用引導程序（前端）和codeigniter開發購物車。當添加到購物車項目模式彈出顯示添加項目的詳細信息。但我的問題是頁面滾動移動到模態彈出窗口頂部。

<a href="#" id="edit_product" data-id="<?php echo $lat['product_id'];?>" name="id" data-text="Add To Cart" class="my-cart-b item_add add_to_cart">Add To Cart</a> 

阿賈克斯

$(".product_add").click(function(event) { 

var currentId = globalId; 


$.ajax({ 
      type: 'POST', 
      url: '<?php echo site_url("ajax_controller1/product_add/'+currentId+'")?>', 
      data: { id:'1' }, 
      success:function(response){ 
       $("#cart_container1").html(response); 
       $("#myModal3").modal('show'); 
    } 
    });/* Aajx */ 



}); 

莫代爾

<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" style="overflow: visible;"> 
       <div class="modal-dialog" role="document" style="overflow: visible;"> 
        <div class="modal-content modal-info" style="overflow: visible;"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>       
         </div> 
         <div class="modal-body" id="cart_container1"> 

         </div> 
        </div> 
       </div> 
      </div> 

我做了以下解決這個問題

$('a.add_to_cart').click(function(e) { 
    e.preventDefault(); 
}); 

body.modal-open { 
    overflow: visible; 
} 

這是我的演示網站鏈接

http://cableandmedia.com/ayurstore/

Answer 1

我覺得罪魁禍首就是href="#"

你能做什麼兩件事情，

1. 只是刪除href="#"

2. 變化<a>到`

   <button type="button" id="edit_product" data-id="<?php echo $lat['product_id'];?>" name="id" data-text="Add To Cart" class="my-cart-b item_add add_to_cart">Add To Cart</button>

這應該對你有幫助。

請注意，如果您遵循第二種方法，我已添加type="button"。