在Bootstrap模式中滚动到​​DIV

我有3个按钮，将触发相同的模态，但需要滚动到不同的部分。 我正在努力实现这一目标，请帮助。

 Launch modal   Launch modal   Launch modal   
 
 
 
 
 ... ... ... ... ... 
 
 ... ... ... ... ... 
 
 ... ... ... ... ... 
 
 
 
  

Answer 1

使用模态事件shown.bs.modal并使用该部分的data 。 打开模态的链接可以在event.relatedTarget找到。

干得好：-

 $('#myModal').on('shown.bs.modal', function(event) { // reset the scroll to top $('#myModal .modal-body').scrollTop(0); // get the section using data var section = $(event.relatedTarget).data('section'); // get the top of the section var sectionOffset = $('#' + section).offset(); //scroll the container $('#myModal .modal-body').animate({ scrollTop: sectionOffset.top - 30 }, "slow"); }); 

 .red, .green, .blue { height: 300px; } .red { background-color: red; } .green { background-color: green; } .blue { background-color: blue; } .modal-body { max-height: 350px; overflow: auto; } } 

     Launch modal   Launch modal   Launch modal   
 
 
 
 
 
section-1
 
 
 
 
section-2
 
 
 
 
section-3
 
 
 
 
 
  

Answer 2

这是一个想法。 一旦显示模态滚动（显示shown.bs.modal ）。

 $(document).ready(function(){ $('#myModal').on('shown.bs.modal', function (event) { $target = $('#section-3'); $('.modal-body').animate({ scrollTop: $target.offset().top + 'px' }, 'fast'); }); }); 

JS BIN： http ： //jsbin.com/hagida/3/edit？html， js， output