0

I have a div with a fixed height, and a style property of overflow-y: scroll;. I am needing to know how to use JQuery to scroll to the bottom of this div. All solutions I've found deal with animating the body and html, but I have yet to find a solution for scrolling a div with overflow-y: scroll;.

The following code is what I have, but it scrolls to the bottom instantly; I am needing a smooth scroll.

$('#my-div').animate({scrollTop: $('#my-div').height()}, 'slow');

Thanks in advance.

sme
  • 4,023
  • 3
  • 28
  • 42

2 Answers2

1

Here it is:

$(window).on('load', function(){

  $('.button').on('click', function(){
  
    if ($('.scroller').scrollTop() == 0){
      $('.scroller').animate({'scrollTop': $('.scroller')[0].scrollHeight - $('.scroller').height()}, 1000)
    } else {
      $('.scroller').animate({'scrollTop': 0}, 1000)
    }
    
  })

})
.scroller {
  height: 100px;
  overflow-y: scroll;
}

.button {
  border: 1px solid black;
  cursor: pointer;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">Click me again!</div>
<div class="scroller">
  <pre>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Integer sagittis feugiat erat non varius. 
    Integer molestie mauris et turpis hendrerit, in pulvinar eros pulvinar. 
    Praesent turpis ex, dapibus et pharetra fermentum, faucibus at lectus. 
    Curabitur sollicitudin aliquam sem vel commodo. 
    Vivamus porta, lorem eu gravida luctus. 
    Ipsum metus sodales neque, vel mattis dui metus non nunc. 
    Phasellus ex dui, interdum ut ante sit amet, pretium aliquam risus. 
    Cras elementum lacus non orci scelerisque. 
    Nec finibus nulla dictum. 
    Orci varius natoque penatibus et magnis dis parturient montes. 
    Nascetur ridiculus mus. 
    Donec sed sagittis arcu. Suspendisse potenti. 
    Vestibulum elementum luctus pharetra. 
    Donec scelerisque eros vitae quam faucibus, vel pellentesque sapien efficitur.
  </pre>
</div>

Explanation: You need to use dom property scrollheight to get scrollable content height. For nicer effect, scroll only to the position, where the end of the content is exactly visible.

Rauli Rajande
  • 2,010
  • 1
  • 20
  • 24
0

Seems to work in my example. Check that you're having all correct values to the jquery scroll function.

function scrollMe() {

    $("#myScrollDiv").animate( { scrollTop: 50 }, 1000);
    
}
  
#myScrollDiv {
  overflow-y: auto;
  height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="scrollMe()">scrollMe</button>
<div id="myScrollDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam elit vel dolor molestie, commodo malesuada nibh fringilla. Mauris tristique semper nulla, vel pulvinar sapien luctus eget. Mauris vel ipsum ac justo dapibus iaculis. Etiam ornare eros at purus posuere, eu fermentum est vestibulum. Suspendisse non sapien elementum, lobortis justo ut, cursus dolor. Sed dolor ligula, vehicula eu suscipit id, interdum fermentum urna. Vivamus eu tincidunt erat. Sed id finibus urna, eget rhoncus metus. Nam gravida ante quis mauris tincidunt, non aliquam lorem consequat.
<br>
Cras nec sodales nisi. Donec velit diam, aliquam non ornare et, dignissim nec odio. Aliquam erat volutpat. Proin feugiat, erat eu ullamcorper sagittis, mauris nulla ornare eros, at blandit turpis augue vel turpis. Curabitur porttitor non nisi ut volutpat. Vestibulum massa enim, finibus quis massa molestie, tempor feugiat sem. Aliquam eu sem ac dui ullamcorper blandit. Duis sit amet neque quis nunc fermentum tempor. Curabitur pellentesque ipsum vitae orci mollis tincidunt. Suspendisse dictum quis turpis quis cursus. Cras volutpat sapien eu velit euismod iaculis. Nulla posuere est at dui iaculis, sit amet convallis libero lacinia. Vivamus non blandit tellus. Fusce placerat hendrerit dolor, vel rhoncus mauris interdum venenatis.
<br>
Praesent mauris tortor, pretium sit amet nunc sed, ultricies porttitor massa. Vivamus vestibulum lobortis ex. Pellentesque non vehicula libero, ac bibendum ligula. Integer placerat, mi et suscipit vulputate, nisi purus maximus arcu, non tristique libero ante non diam. Ut vel purus sed metus euismod convallis. Etiam sit amet venenatis metus. Integer at neque dolor. Mauris maximus semper dignissim. Ut pharetra dui magna, eu feugiat turpis lacinia vitae. Suspendisse semper nisi a tortor aliquam sagittis. Pellentesque convallis imperdiet metus ac elementum. Cras elementum sodales vestibulum. Mauris placerat augue eget augue convallis elementum.
<br>
Quisque vulputate magna maximus enim gravida egestas. Mauris nec augue tempor, consectetur turpis et, gravida ipsum. Etiam mollis velit in risus efficitur commodo. Proin rhoncus massa et dui pretium, eu scelerisque velit lacinia. In nec orci quis mi volutpat ullamcorper. Nulla bibendum nibh dolor, a bibendum ipsum pharetra a. Aliquam vel erat blandit, lobortis massa in, lobortis velit. Duis et malesuada sem.
<br>
Pellentesque quis sapien at magna malesuada aliquet eu ac quam. Fusce at risus orci. Phasellus luctus fringilla tincidunt. Duis ornare ex at purus suscipit, et tempus ipsum finibus. Mauris non aliquam dui. Proin in nulla a quam fermentum rhoncus sed a neque. Phasellus mattis, mauris ut fermentum hendrerit, libero nunc ultrices ante, a sollicitudin metus metus quis diam. Sed porttitor elit nec ante efficitur, sit amet convallis neque venenatis. Duis id ultricies mauris, at bibendum leo. Quisque et nibh eu sapien viverra gravida nec quis sem. Praesent et urna mattis, ultrices nunc quis, efficitur neque. Integer blandit neque interdum pellentesque aliquam.
</div>
Jordi Flores
  • 2,080
  • 10
  • 16