Materializecss Datepicker单击时将页面滚动到顶部

Question

我在网页中使用materializecss Datepicker，在我向网页中添加另一个日期选择选项之前，它一直运行良好。

之后，当我选择一个日期时，背景页面会自动滚动到顶部。

我需要加载datepicker的地方：

我需要加载datepicker-1的地方：

模态加载的地方：

这是我的日期选择器1的代码；

<div class="row dateRangeSelector orderStatusWidget-dateRangeSelector"
                                                     id="customDates">
   <div class="col s6 orderStatusWidgetDateWrapper">
            <label>From</label>
          <input type="text" class="datepicker" id="distStartDate">
</div>
<div class="col s6">
        <label>To</label>
        <input type="text" class="orderStatusWidget-datepicker"
                                                               id="endDate1">
</div>

日期选择器2：

<div class="row dateRangeSelector orderStatusWidget-dateRangeSelector" id="customDates">
       <div class="col s6 orderStatusWidgetDateWrapper">
           <label>From</label>
          <input type="text" class="datepicker orderStatusWidget-datepicker"
                                                           id="startDate">
        </div>
       <div class="col s6">
           <label>To</label>
           <input type="text" class="datepicker orderStatusWidget-datepicker"
                                                           id="endDate">
       </div>
  </div>

我的JavaScript代码：

$('#distStartDate').pickadate({
        selectMonths: true, // Creates a dropdown to control month
        selectYears: 15, // Creates a dropdown of 15 years to control year,
        today: 'Today',
        clear: 'Clear',
        close: 'Ok',
        closeOnSelect: true, // Close upon selecting a date,
        onStart: function() {
            $('.picker').appendTo('body');
        }
    })

**每个输入都相同。

在进行了一些元素初始化之后，我发现需要在元素附近创建的选择器元素是在页面底部创建的。

请告诉我解决此错误的方法。