[英]Scroll to DIV with in the Bootstrap Modal
我有3个按钮,将触发相同的模式,但需要滚动到不同的部分。 我正在努力实现这一目标,请提供帮助。
<a data-toggle="modal" data-target="#myModal" class="btn-goto-section-1"> Launch modal </a>
<a data-toggle="modal" data-target="#myModal" class="btn-goto-section-2"> Launch modal </a>
<a data-toggle="modal" data-target="#myModal" class="btn-goto-section-3"> Launch modal </a>
<!-- Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div id="section-1">
...
...
...
...
...
</div>
<div id="section-2">
...
...
...
...
...
</div>
<div id="section-3">
...
...
...
...
...
</div>
</div>
</div>
</div>
</div>
使用显示的模态事件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; } }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <a data-toggle="modal" data-target="#myModal" data-section="section-1"> Launch modal </a> <a data-toggle="modal" data-target="#myModal" data-section="section-2"> Launch modal </a> <a data-toggle="modal" data-target="#myModal" data-section="section-3"> Launch modal </a> <!-- Modal --> <div class="modal fade" id="myModal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div id="sdfsd" class="modal-body"> <div id="section-1"> <h1>section-1</h1> <div class="red"></div> </div> <div id="section-2"> <h1>section-2</h1> <div class="green"></div> </div> <div id="section-3"> <h1>section-3</h1> <div class="blue"></div> </div> </div> </div> </div> </div>
就像@Virendra yadav注释一样,如果模态具有动态高度,并且您要滚动主体,而不是模态内的div,则替换为:-
// get the top of the section
var sectionOffset = $('#' + section).offset();
//scroll the container
$('#myModal .modal-body').animate({
scrollTop: sectionOffset.top - 30
}, "slow");
与
// get the div position
var position = $('#' + section).position();
// scroll modal to position top
$("#myModal").scrollTop(position.top);
这是一个主意。 一旦显示了模式滚动(如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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.