twitter-bootstrap 在 Bootstrap 模式中滚动到​​ DIV

Scroll to DIV with in the Bootstrap Modal

提问by Syed

I have 3 buttons that will trigger same modal but need to scroll to different sections. I am struggling to achieve this, kindly help.

我有 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>

回答by BenG

Use the modal event shown.bs.modaland use datafor the section. The link which opened the modal can be found at event.relatedTarget.

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

Here you go:-

干得好：-

$('#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>

As @Virendra yadavcomment, if the modal has a dynamic height and you want to scroll the body, and not a div within the modal, then replace:-

正如@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");

with

和

// get the div position
var position = $('#' + section).position();
// scroll modal to position top
$("#myModal").scrollTop(position.top);

回答by Lucas Pottersky

Here is one idea. Make the modal scroll once it is shown (shown.bs.modal).

这是一个想法。显示时使模态滚动 ( 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

JS BIN：http: //jsbin.com/hagida/3/edit?html,js, output