<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0px;
    }
    #content {
      width: 1000px;
      height: 2000px;
      background: silver;
      margin: 0px;
    }
    ::-webkit-scrollbar {
      width: 0px;
      height: 0px;
    }

    #target1 {
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      top: 1100px;
      left: 250px;
    }

    #target2 {
      width: 100px;
      height: 100px;
      background: blue;
      position: absolute;
      top: 1100px;
      left: 750px;
    }

    #target3 {
      width: 100px;
      height: 100px;
      background: green;
      position: absolute;
      top: 1400px;
      left: 250px;
    }

    #target4 {
      width: 100px;
      height: 100px;
      background: orange;
      position: absolute;
      top: 1400px;
      left: 750px;
    }
  </style>
</head>

<body>
  <div id="content">
    This page is 1000x2000 pixels.
    <button type="submit" id="target1" name="button1" value="foo">Target1</button>
    <button type="submit" id="target2" name="button2" value="foo">Target2</button>
    <button type="submit" id="target3" name="button3" value="foo">Target3</button>
    <button type="submit" id="target4" name="button4" value="foo">Target4</button>
  </div>
</body>

</html>