JSFiddle - React, Tailwind, and code Playground

HTML

<button onClick="scrollToBottom('div')">Scroll Div to Bottom</button>
<button onClick="scrollSmoothToBottom('div')">Scroll <b>Smooth</b> to Bottom</button>
<article id="div">
  This is Top of Div
  <span>Bottom of Div</span>
</article>
<button onClick="scrollToTop('div')">Scroll Div to Top</button>
<button onClick="scrollSmoothToTop('div')">Scroll <b>Smooth</b> to Top</button>

CSS

body {
  overflow-x: hidden;
  overflow-y: visible;
}
#div {
  width: 300px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: visible;
  background-color: orange;
}

#div span {
  position: relative;
  top: 2000px;
}

span {
  background-color: blue;
}

JavaScript

function scrollToBottom (id) {
   var div = document.getElementById(id);
   div.scrollTop = div.scrollHeight - div.clientHeight;
}

function scrollToTop (id) {
   var div = document.getElementById(id);
   div.scrollTop = 0;
}

//Require jQuery
function scrollSmoothToBottom (id) {
   var div = document.getElementById(id);
   $('#' + id).animate({
      scrollTop: div.scrollHeight - div.clientHeight
   }, 500);
}

//Require jQuery
function scrollSmoothToTop (id) {
   var div = document.getElementById(id);
   $('#' + id).animate({
      scrollTop: 0
   }, 500);
}