What I want to achieve is to create two buttons: 1: that opens modal window 2: opens same modal and scrolls to bottom
code:
$('#menu-item-6706').on('click', function (){
$('#exampleModal').on('shown.bs.modal', function (event) {
$("#exampleModal .modal-body").animate({ scrollTop: $('#exampleModal .modal-body').prop("scrollHeight")}, 'slow');
});
});
Here is full jsfiddle snippet: https://jsfiddle.net/mkx2auhj/1/
Script is almost working:
If you trigger for the the first time “launch demo modal” it opens modal. If you trigger “Contact” it opens modal and scrolls to bottom. So it’s correct.
The problem is if you hit “launch demo modal” again it scrolls to bottom again, which is not desirable. I want it to open standard modal like the first time.
Have a bunch of buttons that all trigger the same modal with slightly different contents? Use
event.relatedTargetand HTML data-bs-* attributes to vary the contents of the modal depending on which button was clicked. https://getbootstrap.com/docs/5.1/components/modal/#varying-modal-content
Move the 'shown.bs.modal' event listener outside the click event and use event.relatedTarget to detect when the "Contact" button toggles the modal and then animate the modal accordingly. Try this
$('#exampleModal').on('shown.bs.modal', function (event) {
if( $(event.relatedTarget).is('#menu-item-6706') ){
$("#exampleModal .modal-body").animate({
scrollTop: $('#exampleModal .modal-body').prop("scrollHeight")
}, 'slow');
}
});