Scroll animation to element jumps to top of page after animation

Question

I am using jQuery to scroll to a div after form submission. However after the form is submitted and the scroll animation finishes, it then jumps back up to the top of the page and doesn't stay at the desired location

Here is my jQuery code :

  <script>
  $(document).ready(function(){
    $("#checkreg").click(function() {
      $('html, body').animate({
        scrollTop: $("#dvlares").offset().top
      }, 2000);
    });
  });
  </script>

Added code for more info. Here is the form :

<form class="form-horizontal text-center" role="form" id="check" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
              <div class="form-group">
                <div class="col-md-6 col-md-offset-3">
                  <input type="text" class="form-control input-lg text-center" id="regno" name="reg"
                  placeholder="Enter Your Vehicle Reg">
                  <br>
                  <button type="submit" class="btn btn-block btn-lg btn-primary" id="checkreg">Check Eligibility Now</button>
                </div>
              </div>
              </form>

Here is the div with the corresponding ID

<div class="section" style="background-color:#202121;" id="dvlares">
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-md-offset-4">
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">Check Vehicle Info :</h3>
          </div>
          <div class="panel-body" style="background-color:gainsboro">
            <p>Make : <?php echo $vehicle['make'];?></p>
            <p>Registration Year : <?php echo $vehicle['year'];?></p>
            <p>Body Colour : <?php echo $vehicle['colour'];?></p>
            <p>Engine Capacity : <?php echo $vehicle['engine'];?>cc</p>
            <p>Fuel : <?php echo $vehicle['fuel'];?></p>
            </div>
            <div class="panel-footer text-center">
             Are The Vehicle Details Above Correct ?
            <div class="btn-group btn-block" data-toggle="buttons">
              <div class="col-xs-6"><a class="btn-success btn-md center-block" style="cursor:pointer">Yes</a></div>
              <div class="col-xs-6"><a class="btn-danger btn-md center-block" style="cursor:pointer">No</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I have amended my jQuery script to the code below :

    <script>
  $(document).ready(function(){
    $("#checkreg").click(function(e) {
    e.preventDefault();
        $('html, body').animate({
        scrollTop: $("#dvlares").offset().top
        }, 2000);
    });
});
  </script>

There is no other anchor or ID set the same anywhere on the page