<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src='jquery.min.js' type='text/javascript'></script>

  <title>Scroll Latency Test</title>
  <style>
    div.block  {
      width: 60px;
      margin: auto;
      height: 1024px;
    }
    div#block_a {
      background-color: white;
    }
    div#block_b {
      background-color: black;
    }
    body {
      margin: 0;
    }
    #container {
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
  </style>
  <script>
    function on_click(event) {
      // Swap colors with each click
      if (event.clientY < (window.innerHeight / 2.0)) {
        $("#block_a").css("background-color", "black")
        $("#block_b").css("background-color", "white")
      } else {
        $("#block_a").css("background-color", "white")
        $("#block_b").css("background-color", "black")
      }
      // Scroll to location of click
      $("body").animate({
          scrollTop: $("#block_a").height() - event.clientY
      }, 0);
    }
    $(document).ready(function() {
      $("body").click(on_click)
    })
  </script>
</head>

<body>
  <div id="container">
    <div id="block_a" class="block">&nbsp;</div>
    <div id="block_b" class="block">&nbsp;</div>
  </div>
</body>

</html>