HTML Dynamic scrollTop with a Jquery btn

Question

So I made a web site on WordPress in which I need to put an arrow that scroll down in the page, and it works but just one time and I need that buttom work the hole page. This is the code:

<script type="text/javascript">
  $(document).ready(function(){
    $('.ir-abajo').click(function(){
      $('body, html').animate({
        scrollTop: '220px'
      }, 200);
    });
  });
</script>

possibly duplicate of https://stackoverflow.com/questions/1144805/scroll-to-the-top-of-the-page-using-javascript-jquery — Harshana, Jun 20 '19 at 15:29
Your question is a little unclear in terms of what you're looking for. Can you explain it a little more. — rpivovar, Jun 20 '19 at 15:30
So i have this btn that supposes have to scroll to the buttom to the page, but the btn just work one time, that means the btn scroll 220px when i need the btn to to scroll 6 times (6x220px) — amy raez, Jun 20 '19 at 16:08
Harshana: no, because that scroll to the top and i need to scroll to the buttom of the page — amy raez, Jun 20 '19 at 16:09

score 0 · Accepted Answer · answered Jun 20 '19 at 17:58

I think I see what you're talking about. You just need to include the already set scroll top and then add however much more you want to scroll to it. It worked once because the scroll top was 0 and then you set it to 220, but each time after you're just setting 220 to 220. Try:

$(document).ready(function(){
  $('.ir-abajo').click(function(){
    var newScrollTop = ($(document).scrollTop() + 220) + 'px';
    $('body, html').animate({
      scrollTop: newScrollTop
    }, 200);
  });
});

And a fiddle for ya: https://jsfiddle.net/tk9oxfpe/

HTML Dynamic scrollTop with a Jquery btn

1 Answers1