title: jquery datepicker scrolls to top of page after date selected
body: <p>I know this question have been up for a few years ago, but I could not find relevant answer to my problem.</p>
  
  <p>I have made a booking widget plug in seen on the middle on this WP page:
  <a href="http://mattarahkka.com/the-lodge/#" rel="nofollow noreferrer">http://mattarahkka.com/the-lodge/#</a></p>
  
  <p>Afte a date is selected the page scrolls to the top. The date picker remains open and the date remains selected. But why does the page jump to the top?</p>
  
  <p>widget php code:</p>
  
  <pre><code>// include custom jQuery
  functieon csf_booking_widget_custom_jquery() {
  
      /*   REGISTER JS FOR PLUGIN */
       wp_register_script('datepicker',plugins_url().'/csf-booking-widget/js/datepicker_2.js');
      /*   REGISTER CSS FOR PLUGIN */
      wp_register_style('jquery-ui','http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css');
      wp_register_style('csf-happy-booking-widget',plugins_url().'/csf-booking-widget/css/happy-booking-widget.css');
      /*   CALL ALL JS FOR PLUGIN */
      wp_enqueue_script('jXquery');
      wp_enqueue_script('jquery-ui-core');
      wp_enqueue_script('jquery-ui-datepicker');
      wp_enqueue_script('datepicker');
       /*   CALL ALL CSS FOR PLUGIN */
      wp_enqueue_style('jquery-ui');
      wp_enqueue_style('csf-happy-booking-widget');
  }
  
  function insert_booking_widget() 
      {
       $content = "&lt;div class=\"bookingWidget\"&gt;";
       $content .= "&lt;h2&gt;Book Now&lt;/h2&gt;";
       $content .= "&lt;form method=\"get\" action=\"https://mattarahkka.happybooking.io/\"&gt;";
       $content .= "&lt;table class=\"sideTable\"&gt;&lt;tbody&gt;&lt;tr&gt;";
       $content .= "&lt;span class=\"date-title\" style=\"padding: 0px\"&gt;Check-in&lt;/span&gt;";
       $content .= "&lt;input id=\"from\" name=\"from\" class=\"checkInsDate\" type=\"text\"&gt;";
       $content .= "&lt;/tr&gt;&lt;tr&gt;";
       $content .= "&lt;span class=\"date-title\" style=\"padding: 0px\"&gt;Check-out&lt;/span&gt;";
       $content .= "&lt;input id=\"to\" name=\"to\" class=\"checkInsDate\" type=\"text\"&gt;";
       $content .= "&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;";
       $content .= "&lt;div class=\"buttonHolder\"&gt;";
       $content .= "&lt;input class=\"btn\" value=\"Search available lodgings\" type=\"submit\"&gt;";
       $content .= "&lt;/div&gt;";
       $content .= "&lt;input type=\"hidden\" name=\"lang\" value=\"English\"/&gt;";
       $content .= "&lt;/form&gt;&lt;/div&gt;";
  
       return $content;
      }
  add_shortcode('happy-booking-widget','insert_booking_widget');
  
  add_action('wp_enqueue_scripts', 'csf_booking_widget_custom_jquery');
  </code></pre>
  
  <p>The Js file (datepicker_2):</p>
  
  <pre><code>jQuery(function(){ 
      var dates = jQuery("#from, #to").datepicker({
      showWeek: true,
      firstDay: 1,
      dateFormat: 'yy-mm-dd',
      dayNamesMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
      weekHeader: "W.",
      monthNames: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
      onSelect: function(selectedDate) {
          var option = this.id == "from" ? "minDate" : "maxDate",
          instance = jQuery(this).data("datepicker"),
          date = jQuery.datepicker.parseDate(
              instance.settings.dateFormat ||
              jQuery.datepicker._defaults.dateFormat,
              selectedDate, instance.settings );
          dates.not(this).datepicker("option", option, date);
          autoclose: true;
      }
  
      });
  });
  </code></pre>