JSFiddle - React, Tailwind, and code Playground

by axrwkr

HTML

<div class="btns">
<button class="btn1">One</button>
<button class="btn2">Two</button>
<button class="btn3">Three</button>
</div>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<div class="myDiv">My Div</div>
<p>stuff</p><p>stuff</p><p>stuff</p>

CSS

.btns {
    position: fixed;
}

JavaScript

//works
   $('.btn1').click(function(){
     $('html, body').animate({scrollTop:0}, 750);
   });

   //works
   $('.btn2').click(function(){
     $('html, body').animate({scrollTop:$(document).height()}, 750);
     return false;
   });

   // works
   $('.btn3').click(function(){
     $('html, body').animate({scrollTop:$(".myDiv").offset().top}, 750);
     return false;
   });