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.

CodePudding user response：

Have a bunch of buttons that all trigger the same modal with slightly different contents? Use event.relatedTarget and 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');
    }
});

CodePudding user response：

.one() solved the problem

$('#menu-item-6706').on('click', function (){
scrollToBottom();
});

function scrollToBottom(){
$('#exampleModal').one('shown.bs.modal', function (event) {
$("#exampleModal .modal-body").animate({ scrollTop: $('#exampleModal .modal-body').prop("scrollHeight")}, 'slow');
});}