JSFiddle - React, Tailwind, and code Playground

HTML

<button onClick="scrollToBottom('div')">Scroll to Bottom</button>
<button onClick="scrollSmoothToBottom('div')">Scroll <b>smoothly</b> to Bottom</button>
<hr />

<!-- body content -->
<div id="div">
  Top of div
  <br>
  <div>Long body content</div>
  Bottom of div
</div>
<hr />
<button onClick="scrollToTop('div')">Scroll to Top</button>
<button onClick="scrollSmoothToTop('div')">Scroll <b>smoothly</b> to Top</button>

CSS

#div {
  width: 300px;
  height: 200px;
  background-color: orange;
  overflow-y: auto;
}

#div div {
  height: 1000px;
  width: 200px;
  background-color: green;
}

JavaScript

const scrollToBottom = (id) => {
	 const element = document.getElementById(id);
   element.scrollTop = element.scrollHeight;
}

const scrollToTop = (id) => {
   const element = document.getElementById(id);
   element.scrollTop = 0;
}

// Require jQuery
const scrollSmoothToBottom = (id) => {
   const element = $(`#${id}`);
   element.animate({
      scrollTop: element.prop("scrollHeight")
   }, 500);
}

// Require jQuery
const scrollSmoothToTop = (id) => {
   $(`#${id}`).animate({
      scrollTop: 0,
   }, 500);
}