On my webpage, I have two scrolls present. One is clearly visible on the page (not loaded with ajax), while the other one is located inside an accordion. Both of them share the same class names.
I want these scrolls to always be positioned at the top. I've been able to achieve this for the visible scroll using the provided snippets:
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
And also with this snippet:
var messageBody = document.querySelector('.m-messenger__messages');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;
However, the scroll inside the accordion menu remains unaffected by these changes. When I manually open the accordion and run the snippets, it does scroll to the top.
To tackle this issue, either I need a way to apply these snippets to all scrolls on the page or have the javascript code executed when clicking on the accordion.
My preference is to implement the first solution. Despite attempting to modify the function as shown below, replacing scrollTop with alert(), I could not accomplish the desired outcome.
$(".m-accordion__item").click(function() {
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});
How can I successfully achieve this goal?