Прокрутите до DIV с помощью Bootstrap Modal

Question

У меня есть три кнопки, которые будут запускать один и тот же модальный, но вам нужно прокрутить до разных разделов. Я изо всех сил пытаюсь добиться этого, любезно помогите.

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

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; 
 
} 
 
}

<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 Ядав комментарий, если модальный имеет динамическую высоту, и вы хотите, чтобы прокрутить тело, а не ДИВ в модальный, а затем заменить: -

// 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); 

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