JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<button onClick="scrollToBottom()">Scroll to Bottom</button>

<hr />

<!-- body content -->
<form id="acf-img-set-post-thumb-form">
  <pre class="logger">
post #146 post thumbnail has been set with acf image field acf_featured_img attachment.
post #147 post thumbnail has been set with acf image field acf_featured_img attachment.
post #148 post thumbnail has been set with acf image field acf_featured_img attachment.
post #149 post thumbnail has been set with acf image field acf_featured_img attachment.
post #150 post thumbnail has been set with acf image field acf_featured_img attachment.
post #151 post thumbnail has been set with acf image field acf_featured_img attachment.
post #152 post thumbnail has been set with acf image field acf_featured_img attachment.
post #153 post thumbnail has been set with acf image field acf_featured_img attachment.
post #154 post thumbnail has been set with acf image field acf_featured_img attachment.
post #155 post thumbnail has been set with acf image field acf_featured_img attachment.
post #156 post thumbnail has been set with acf image field acf_featured_img attachment.
post #157 post thumbnail has been set with acf image field acf_featured_img attachment.
post #158 post thumbnail has been set with acf image field acf_featured_img attachment.
post #159 post thumbnail has been set with acf image field acf_featured_img attachment.
post #160 post thumbnail has been set with acf image field acf_featured_img attachment.
post #161 post thumbnail has been set with acf image field acf_featured_img attachment.
post #146 post thumbnail has been set with acf image field acf_featured_img attachment.
post #147 post thumbnail has been set with acf image field acf_featured_img attachment.
post #148 post thumbnail has been set with acf image field acf_featured_img attachment.
post #149 post thumbnail has been set with acf image field acf_featured_img attachment.
post #150 post thumbnail has been set with acf image field acf_featured_img...

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 scrollSmoothlyToBottom = (id) => {
   const element = $(`#${id}`);
   element.animate({
      scrollTop: element.prop("scrollHeight")
   }, 500);
}

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