Sarmad Gardezi

Sarmad Gardezi

a freelance developer


Home about Portfolio Blog

How to auto scroll to the bottom of a div in WordPress

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 # .

 



RELATED POSTS

Video Tutorials