This article is just going to be a little nublet of an article. Or a nugget. Whatever.
I found it ridiculously difficult to add what I thought was a common, simple feature to a web app: the ability for a div to automatically scroll to the bottom whenever new content is added. I didn’t want the page to scroll, and I didn’t want the div height to grow, or the content to expand outside the div.
I tried using a library which is supposed to provide this functionality, but I was having no luck. It would sometimes jump around for the first couple of additions, but was terribly inconsistent, and I couldn’t understand the source code well enough to tweak and make it work.
Next, I did it the hard way myself — by following a summary of how to accomplish it with some sample code using requestAnimationFrame. This was an excellent way to learn more about requestAnimationFrame, which was something I wanted to do anyway. It also eventually worked and solved my problem! Rad.
But get this — it turns out there’s a better way. Introducing the under-appreciated Mutation Observer. Check it out:
Fir you need to create a div with the Specific ID.
<div id="scroll"> <!-- content of the div --> </div>
After that Use this link any where and when someone press on it page will automatically scroll down to the specific div.
<a href="#scroll" rel"link" /> Link name </a>
Remember that in the URL type Div ID with # .