Scrollable DIV, I want to create an animation that scrolls to the bottom of the div on pageload

Question

I have a DIV that has an overflow-y set to scroll.

.scrolling-div {
width: 85%;
height: 200px;
overflow-y: scroll;
}

Assuming that I have a bunch of content inside this div, I want it to scroll all the way to the bottom of the div on pageload. I actually want to see the animation of the scroll (so the div would start at the top, but then I want to see it scroll to the bottom).

How do I create this with either Javascript, Jquery, or just pure CSS? I also want to be able to control the speed of the scroll animation.

Duplicate? http://stackoverflow.com/questions/270612/scroll-to-bottom-of-div?rq=1 — Thomas Juranek, Dec 28 '16 at 19:32

score 0 · Answer 1 · answered Dec 28 '16 at 19:41

0

$(function() {
  var wtf    = $('#scroll');
  var height = wtf[0].scrollHeight;
  wtf.scrollTop(height);
});

#scroll {
   width: 200px;
   height: 300px;
   overflow-y: scroll;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroll">

answered Dec 28 '16 at 19:41

ghnome

57
1
7

Is this answer ok for you? – ghnome Dec 28 '16 at 19:44
This doesn't seem to be doing anything. – kevinkt Dec 29 '16 at 16:57
Actually, disregard my last comment. It is working now, but it doesn't allow me to control speed. – kevinkt Dec 29 '16 at 16:59

Martin Mendez · Accepted Answer · 2016-12-29T17:02:54.350

0

You can use jquery's animate:

$('.scrolling-div').animate({ 
   scrollTop: $('.scrolling-div').prop('scrollHeight')
}, 1000);

See a working example here.

edited Dec 29 '16 at 17:02

answered Dec 28 '16 at 20:15

Martin Mendez

1,226
1
9
6

Scrollable DIV, I want to create an animation that scrolls to the bottom of the div on pageload

2 Answers2