JSFiddle - React, Tailwind, and code Playground

by Hari Menon

HTML

<script src="https://raw.github.com/flesler/jquery.scrollTo/master/jquery.scrollTo.min.js"></script>
<div class="container">
    <div class="eachFloor">
        <input type="checkbox" />
        <div class="floor"></div>
    </div>
    <div class="eachFloor">
        <input type="checkbox" />
        <div class="floor"></div>
    </div>
    <div class="eachFloor">
        <input type="checkbox" />
        <div class="floor"></div>
    </div>
    <div class="eachFloor">
        <input type="checkbox" />
        <div class="floor"></div>
    </div>
    <div class="eachFloor">
        <input type="checkbox" />
        <div class="floor"></div>
    </div>
    <div class="elevator"></div>
</div>

CSS

.container {
     width: 500px;
     margin-left: 100px;
     position:relative;
 }
 .floor {
     width: 400px;
     background: #eee;
     border-bottom: 1px solid black;
     height: 300px;
 }
 .elevator {
     background: #000;
     height:260px;
     position: absolute;
     bottom: 20px;
     left: 20px;
     right: 20px;
     width: 360px;
 }
 input[type="checkbox"] {
     float:right;
     margin-left: 100px;
     margin-top: 50px;
 }

JavaScript

$(document).on("click", "input:checkbox", function (event) {
      var positionToScrollTo = $(this).parent().offset();
      // below line works fine and the window scrolls
      $("html, body").scrollTo($(this).parent(),1000);  

      // i want the below line to work and make the div scroll in to 
      // the corresponding floor which is div.eachFloor but its not working !
      $(".elevator").scrollTo($(this).parent(), 1000);

      /*
    $(".elevator").animate({ scrollTop: $(this).parent().offset().top },
                 1000);
    */
  });