javascript - jQuery Scroll Buttons that are limited by the amount of content -

i new javascript , jquery , have issue code wrote, scrolls after content , cannot think of how limited amount of content.

here jquery:

jquery('.scrollup').click(function(event){     jquery(".entry-content-area").animate({ "margin-top": "+=150px" },'100'); }); jquery('.scrolldown').click(function(event){     jquery('.entry-content-area').animate({ "margin-top": "-=150px" },'100'); }); 

here html (it's wordpress):

<div class="entry-content-box">     <div class="entry-containment-area">         <div class="entry-content-area">             <p>content here</p>         </div><!-- entry-content-area -->     </div><!-- entry-containment-area -->     <div class="scroll-area">         <ul>             <li>                 <button class="scrolldown"></button>             </li>             <li>                 <button class="scrollup">                 </button>             </li>        </ul>     </div><!-- scroll-area --> </div><!-- entry-content-box --> 

as can see moves css margin-top 150px or down, not linked actual amount of text. how recode make scrolls limited amount of text?

thanks!

i believe trying animate scrolltop property, rather margin top. assuming have overflow container text causing container overflow, can animate scroll top property content moves within scroll container.

jquery('.scrollup').click(function(event){     jquery(".entry-content-area").animate({ "scrolltop": "-=150px" },'100'); }); jquery('.scrolldown').click(function(event){     jquery('.entry-content-area').animate({ "scrolltop": "+=150px" },'100'); });