JSFiddle - React, Tailwind, and code Playground

HTML

<h2>
  Header
</h2>
<button class="ir-abajo">Scroll Button</button>
<p>Words 1</p>
<p>Words 2</p>
<p>Words 3</p>
<p>Words 4</p>
<p>Words 5</p>
<p>Words 6</p>
<p>Words 7</p>
<p>Words 8</p>
<p>Words 9</p>
<p>Words 10</p>
<p>Words 11</p>
<p>Words 12</p>
<p>Words 13</p>
<p>Words 14</p>
<p>Words 15</p>
<p>Words 16</p>
<p>Words 17</p>
<p>Words 18</p>
<p>Words 19</p>
<p>Words 20</p>
<p>Words 21</p>
<p>Words 22</p>
<p>Words 23</p>
<p>Words 24</p>
<p>Words 25</p>
<p>Words 26</p>
<p>Words 27</p>
<p>Words 28</p>
<p>Words 29</p>
<p>Words 30</p>

CSS

h2 {
  background: red;
}
button.ir-abajo {
    position: fixed;
    right: 15px;
    bottom: 15px;
}

JavaScript

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