title: How can I prevent the browser from scrolling on top of the page when clicking the checkbox?
body: <p>Whenever I click on the checkbox, the browser window (firefox) will scroll on the top of the screen.<br>
  How can I prevent this behavior so when I click on the checkbox the browser window will not scroll on top?<br>
  Here is the code found from here <a href="http://jsfiddle.net/zAFND/6/" rel="noreferrer">http://jsfiddle.net/zAFND/6/</a><br>
  Thank you.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Test&lt;/title&gt;
          &lt;style&gt;
              div label input {
                  margin-right: 100px;
              }
  
              body {
                  font-family:sans-serif;
              }
  
              #ck-button {
                  margin: 4px;
                  background-color: #EFEFEF;
                  border-radius: 4px;
                  border: 1px solid #D0D0D0;
                  overflow: auto;
                  float: left;
              }
  
              #ck-button {
                  margin: 4px;
                  background-color: #EFEFEF;
                  border-radius: 4px;
                  border: 1px solid #D0D0D0;
                  overflow: auto;
                  float: left;
              }
  
              #ck-button:hover {
                  margin: 4px;
                  background-color: #EFEFEF;
                  border-radius: 4px;
                  border: 1px solid red;
                  overflow: auto;
                  float: left;
                  color: red;
              }
  
              #ck-button label {
                  float: left;
                  width: 4.0em;
              }
  
              #ck-button label span {
                  text-align: center;
                  padding: 3px 0px;
                  display: block;
              }
  
              #ck-button label input {
                  position: absolute;
                  top: -20px;
              }
  
              #ck-button input:checked + span {
                  background-color: #911;
                  color: #fff;
              }
          &lt;/style&gt;    
  &lt;/head&gt;
      &lt;body&gt;
          &lt;br&gt;
          &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
          &lt;div id="ck-button"&gt;
              &lt;label&gt;
                  &lt;input type="checkbox" value="1"&gt;&lt;span&gt;red&lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>