Css Overflow: Scroll. Start From The Bottom

I am building a chat widget, which is minimized (collapsed and fixed to bottom of page) by default and then maximized when clicked. It has a fixed height, and overflow-y: scroll. I

Solution 1:

You can do it like this:

1. Declare your chatView (widget) minimized height (5vh in my example) by default
2. When user wants to open the chatView (click in my example), you adding class (open in my example) and increase it's height (90vh in my example). With transition property - you get wanted animation.
3. Use mentioned jQuery method .scrollTop with needed container height (#chatView>div in my example), which insures it scroll to the bottom.

$(function(){
	$("#chatView").click(function(){
            $(this).toggleClass("open").scrollTop($("#chatView>div").height());
        });
});

		

		*{
			margin:0;
		}
		footer{
			height:10vh;
			position: absolute;
			bottom: 0;
		}
		#chatView{
			width: 20vw;
			background:red;
			position:absolute;
			bottom:0;
			height:4vh;
			transition: height 1s;
			overflow-y:scroll;
		}
		#chatView.open{
			height: 90vh;
		}
		#chatView>div{
			background:green;
			height: 95vh;
		}
		#chatView>figure{
			height: 4vh;
		}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><footer><divid="chatView" ><figure></figure><div ></div></div></footer>