在javascript中初始化datepicker时，为什么html页面向上滚动？

Question

I have an HTML page, laravel blade exactly. My question is when the date picker is initialized in javascript, why is the HTML page scrolled up? This is the code at the bottom of the page:

<script type="text/javascript">
        $(document).ready(function () {            
            $('.date').datepicker({
                firstDayOfWeek: 1,
                weekDayFormat: 'narrow',
                inputFormat: 'd/M/y',
                outputFormat: 'd/M/y',
                markup: 'bootstrap4',
                theme: 'bootstrap',
                modal: false
            });
        });
    </script>

I tried to remove the javascript code and I ran it from the Chrome inspector, in the console tab after the page was ready. The page goes to the top.

Why? Is it possible to avoid this behavior?

Answer 1

The code you've included isn't causing the page to scroll. You've likely got one of the inputs focused when you run it, or there is some other javascript which is interacting with the code from your question.

 window.scrollTo(0,document.body.scrollHeight); // scroll to bottom $(document).ready(function () { $('.date').datepicker({ firstDayOfWeek: 1, weekDayFormat: 'narrow', inputFormat: 'd/M/y', outputFormat: 'd/M/y', markup: 'bootstrap4', theme: 'bootstrap', modal: false }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <input type="date" class="date"> <div style="height: 200vh"></div>