Scroll top to scroll to the bottom after first click

Question

I want to scroll to the bottom of an element. I searched for solutions here and i got this but the scrolltop is getting set to zero on first click and if I click on the element again, it scrolls to bottom. I want to scroll to the bottom on first click. The duplicate suggested to me is wrong. I am using Javascript. Not jquery,

var element = document.querySelector('.message');
element.scrollTop = element.scrollHeight;

.message {
    width: 900px;
    height: 450px;
    margin-top: 0%;
    overflow-y: scroll;  
}

Answer 1

I have replicated your question and it's working. When I click the first time in the message area the message scrolls to bottom.

Here is the working example:

document.querySelector('.message').addEventListener('click', () => {
 var element = document.querySelector('.message');
 element.scrollTop = element.scrollHeight;
})

.message {
    width: 900px;
    height: 100px;
    margin-top: 0%;
    overflow-y: scroll;  
}

<div class="message">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur lorem donec massa sapien faucibus. Lorem ipsum dolor sit amet consectetur adipiscing elit duis. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Diam quam nulla porttitor massa id. Semper viverra nam libero justo laoreet. Dui vivamus arcu felis bibendum ut tristique et. Proin sed libero enim sed faucibus. Consectetur libero id faucibus nisl tincidunt. Arcu felis bibendum ut tristique et egestas quis ipsum. Quisque id diam vel quam. Dui sapien eget mi proin sed. Sit amet luctus venenatis lectus magna fringilla.

Velit dignissim sodales ut eu sem. Malesuada fames ac turpis egestas sed. Tellus orci ac auctor augue mauris augue neque gravida. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Facilisis mauris sit amet massa vitae tortor condimentum. Feugiat nibh sed pulvinar proin. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Laoreet sit amet cursus sit amet. Diam maecenas sed enim ut sem viverra aliquet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Sagittis orci a scelerisque purus semper eget duis. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Odio tempor orci dapibus ultrices in iaculis. Lacus sed turpis tincidunt id.

Tortor condimentum lacinia quis vel eros donec ac odio tempor. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Luctus accumsan tortor posuere ac. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Amet cursus sit amet dictum sit amet justo donec enim. Integer vitae justo eget magna fermentum. Lectus arcu bibendum at varius vel pharetra vel. Diam maecenas ultricies mi eget mauris pharetra et. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Nullam non nisi est sit amet facilisis magna etiam tempor. Laoreet non curabitur gravida arcu ac tortor. Sed velit dignissim sodales ut eu. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec.

Enim ut sem viverra aliquet. Sit amet cursus sit amet dictum. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Nullam vehicula ipsum a arcu cursus vitae congue mauris rhoncus. In hac habitasse platea dictumst quisque sagittis purus. Libero justo laoreet sit amet cursus sit amet dictum. Nisl vel pretium lectus quam id. Tempor orci dapibus ultrices in iaculis nunc. Turpis egestas pretium aenean pharetra. Sit amet commodo nulla facilisi. Eget est lorem ipsum dolor sit amet consectetur. Sagittis vitae et leo duis ut diam quam. Nulla aliquet enim tortor at auctor urna nunc id cursus. Curabitur vitae nunc sed velit dignissim sodales. Sit amet massa vitae tortor condimentum lacinia quis vel. Id nibh tortor id aliquet lectus proin.

Varius quam quisque id diam vel quam elementum. Felis eget velit aliquet sagittis id consectetur purus ut. Mauris a diam maecenas sed enim ut sem viverra aliquet. Arcu dui vivamus arcu felis. Ac turpis egestas sed tempus urna et. Vel pharetra vel turpis nunc eget lorem. Praesent tristique magna sit amet purus. In ornare quam viverra orci sagittis. Potenti nullam ac tortor vitae purus. Donec ac odio tempor orci dapibus ultrices in.
Varius quam quisque id diam vel quam elementum. Felis eget velit aliquet sagittis id consectetur purus ut. Mauris a diam maecenas sed enim ut sem viverra aliquet. Arcu dui vivamus arcu felis. Ac turpis egestas sed tempus urna et. Vel pharetra vel turpis nunc eget lorem. Praesent tristique magna sit amet purus. In ornare quam viverra orci sagittis. Potenti nullam ac tortor vitae purus. Donec ac odio tempor orci dapibus ultrices in.
Varius quam quisque id diam vel quam elementum. Felis eget velit aliquet sagittis id consectetur purus ut. Mauris a diam maecenas sed enim ut sem viverra aliquet. Arcu dui vivamus arcu felis. Ac turpis egestas sed tempus urna et. Vel pharetra vel turpis nunc eget lorem. Praesent tristique magna sit amet purus. In ornare quam viverra orci sagittis. Potenti nullam ac tortor vitae purus. Donec ac odio tempor orci dapibus ultrices in.
</div>