JSFiddle - React, Tailwind, and code Playground

by Artem

HTML

<button id="scroll-bot">Scroll bot</button>
<div id="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit suscipit rem fugit iure! Maxime quae, doloribus doloremque! Cumque consequatur nam, nemo! Consequuntur tempora porro distinctio nihil inventore voluptatum dicta quo!</p>
  <p>Odit sunt eaque tempora esse officia, voluptate, itaque deleniti a dolor debitis numquam eligendi ratione nesciunt voluptates qui quod suscipit, voluptatem, repellendus provident magni. Dolorem, esse, placeat. Quas nulla, iusto.</p>
  <p>Laborum, maxime, quis! Possimus, nostrum. Beatae similique sint voluptates quaerat! Iste voluptatibus dolorem earum voluptas vel excepturi pariatur, soluta accusamus assumenda accusantium sapiente corrupti aliquid, corporis, perspiciatis, qui numquam fugiat.</p>
  <p>Laudantium ab consequatur ipsam iure sit harum, assumenda suscipit est quos ipsum, eveniet doloribus voluptatibus, officiis maiores officia repellat et aspernatur accusantium earum fugiat sapiente commodi debitis magni dolorem minus!</p>
  <p>Rerum at tenetur, numquam nobis cumque labore quos quis accusamus eos voluptates laboriosam et velit reiciendis, accusantium ad quae dolorum aperiam dignissimos facilis doloremque sint quia mollitia eaque similique. Quaerat?</p>
  <p>Praesentium minima culpa tenetur quo cumque nemo explicabo sed deleniti quae? Dignissimos, quasi ex cumque esse, suscipit veniam ad assumenda et tempore dolorum neque necessitatibus! Sit similique officiis vel fugit.</p>
  <p>Mollitia, rem, autem saepe debitis nisi laboriosam doloremque amet voluptas assumenda ratione, id ea unde temporibus. Vitae aliquam hic doloribus est voluptatibus fuga, voluptates eius nam provident, incidunt veritatis adipisci?</p>
  <p>Nulla assumenda eaque quia repudiandae eius autem error minus ipsum voluptas reiciendis tenetur praesentium, mollitia blanditiis recusandae sunt qui minima expedita, inventore cumque. Ut labore delectus dignissimos culpa incidunt, in.</p>
...

JavaScript

var c = document.getElementById('container');
var cScrollBot = c.scrollHeight;
var curScroll = 0;
var b = document.getElementById('scroll-bot');
var t = document.getElementById('scroll-top');

b.addEventListener('click', function(){
	scroll('bot');
}, false);

t.addEventListener('click', function(){
	scroll('top');
}, false);

function scroll(dir){
		if(curScroll < cScrollBot) {
  		curScroll+=5;
      if(dir == 'bot') {
      	window.scrollTo(0, curScroll);
      } else {
      	window.scrollTo(0, (cScrollBot - curScroll));
      }
    	setTimeout(function (){
      	scroll(dir);
      }, 1);
  	} else {
  		curScroll = 0;
    	return false;
  	}
}