CODEWITHSUNDEEP
javascriptjqueryhtml
Ninja Warrior 11
Ninja Warrior 11

Reputation: 372

Auto-scroll to the last child of specific class

Is there a way to automatically scroll the box with the last child of class ask with jquery (animation: slow), the 3 ask should stick to the top of the div box?

<!DOCTYPE html>
<html>
<body>
<div id=box style="height: 200px; overflow-y: scroll;">
  <span class=ask>1 ask<br><br><br><br><br><br><br></span>
  <span class=reply>2 reply<br><br><br><br><br><br><br></span>
  <span class=ask>3 ask<br><br><br><br><br><br><br></span>
  <span class=reply>4 reply<br><br><br><br><br><br><br></span>
</body>
</html>

LIKE THIS:

enter image description here

Upvotes: 0

Views: 3452

Answers (2)

Munkhdelger Tumenbayar
Munkhdelger Tumenbayar

Reputation: 1874

I think you might need smooth scrolling on last span of answer of @kitanga Nday

you might look this

$("span").last()[0].scrollIntoView({ behavior: 'smooth' });

Upvotes: 0

Kitanga Nday
Kitanga Nday

Reputation: 3565

You can use the scrollIntoView() function. To use this with jQuery you do the following $(selector).last()[0].scrollIntoView() and the element will be scrolled into view.

You can couple this with the css scrollbehaviour property and the browser will create an auto scroll effect for you without any setup. Do be warned that this css property isn't well supported

Upvotes: 4

Related Questions