CODEWITHSUNDEEP
jqueryhtmlcss
James
James

Reputation: 63

Scroll to bottom of specific element without disrupting the rest of the page

<div id="test" style="height:200px;overflow:scroll;">
  ...large amount text...
  <div id="bottom"></div>
</div>

Throughout the session, jQuery will be injecting more and more text into #test.

The problem is, once the text is past the fold, you can't see it without manually scrolling. To remedy this, I made it skip to #bottom. The problem is is that this disrupts the rest of the page and causes it to jump back up to #bottom regardless of where the user may be on the page at that point.

How can I make the scroll stay focused on the bottom without making the window jump back up to #bottom? What's another way to do this?

Upvotes: 2

Views: 82

Answers (1)

Octobox
Octobox

Reputation: 335

I've had to do something similar recently.

You could just run this every time more text is injected:

$("#test").scrollTop($("#test")[0].scrollHeight);

This will scroll to the bottom of the test div.

Upvotes: 2

Related Questions