滚动到手风琴顶部

Question

In my page I have 2 scrolls.

One is apparent in the page ( They are not loaded with ajax or something.)

The other one is inside an accordion.

I want these scroll to be always at the top. They have same class names.

With the snipets I can achieve my first goal, scrolling to top in apparent scroll

$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);

As well as with this one

var messageBody = document.querySelector('.m-messenger__messages');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;

However, the scroll inside the accordion menu is not affected by this change.

If I open the accordion and run this snippets it scrolls to top. So that either I need to find a way to run this snippet not only to apperent but also all scrolls in the page or when I click the accordion this javascript code needs to be executed.

I would like to solve this problem with the first solution.

I tried this and I couldn't succeed as well. If I put alert() rather than scrolltop inside this function, I got the alertbox.

$(".m-accordion__item").click(function() {
    $('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});

How can I achieve this goal?

Answer 1

This solved my problem. BTW this is bootstrap4. So that it may apply to any of bootstrap 4 templates.

$('.collapse').on('shown.bs.collapse', function(e) {

$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});