JSFiddle - React, Tailwind, and code Playground

HTML

<button onClick="scrollToBottom()">Scroll to Bottom</button>
<button onClick="scrollSmoothToBottom()">Scroll <b>smoothly</b> to Bottom</button>
<hr />
<span>Top of Body</span>

<!-- body content -->
<div id="div">
  Body Content
</div>

<span>Bottom of Body</span>
<hr />
<button onClick="scrollToTop()">Scroll to Top</button>
<button onClick="scrollSmoothToTop()">Scroll <b>smoothly</b> to Top</button>

CSS

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

span {
  background-color: blue;
}

JavaScript

const scrollingElement = (document.scrollingElement || document.body);

const scrollToBottom = () => {
   scrollingElement.scrollTop = scrollingElement.scrollHeight;
}

const scrollToTop = () => {
   scrollingElement.scrollTop = 0;
}

// Require jQuery
const scrollSmoothToBottom = () => {
   $(scrollingElement).animate({
      scrollTop: document.body.scrollHeight,
   }, 500);
}

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