WordPress中结合jQuery与scrollIntoView实现表单提交后自动滚动到结果展示区

项目场景说明 #

在WordPress项目中搭建了检索功能表单，表单校验通过后会触发页面重载，最终将检索结果展示在页面底部。当前需要实现的效果是：页面加载完成后，自动触发平滑滚动，定位到指定ID的检索结果区块位置。

已调研的实现方案 #

查阅技术文档后确认，可通过原生scrollIntoView()方法实现该滚动效果，基础调用代码示例为：

let target = document.getElementById("target");
target.scrollIntoView({ block: "start", behavior: "smooth" });

其中绑定滚动目标的id="target"，对应表单校验通过后承载检索结果的区块，区块的结构参考如下：

<section id="target" class="search-results">
   // 区块业务代码
</section>

现有实现代码与疑问 #

目前已经编写完成表单提交的校验逻辑，校验分支通过后会触发页面重载，同时切换搜索按钮的加载状态与正常显示状态。现在不确定将滚动逻辑嵌入现有提交流程是否能够正常生效，当前的完整实现代码如下：

jQuery('form.searchform').on("submit", function(e) {
    var start_time = (jQuery(this).find("#address_start_time").val() != undefined) ? jQuery(this).find("#address_start_time").val() : jQuery(this).find("#start_time").val();
    var start_date = parseDate(jQuery(this).find("#datepicker-adress").val() + " " + start_time);
    var end_time = (jQuery(this).find("#address_end_time").val() != undefined) ? jQuery(this).find("#address_end_time").val() : jQuery(this).find("#end_time").val();
    var end_date = parseDate(jQuery(this).find("#datepicker-adress1").val() + " " + end_time);
    var today = new Date();
    // console.log(start_date);
    // console.log(end_date);
    // console.log(today);
    if(start_date < today){
        e.preventDefault();
        alert(ipkdatepicker.error_on_start_date);
    } else if(end_date < today){
        e.preventDefault();
        alert(ipkdatepicker.error_on_end_date);
    } else if(end_date < start_date){
        e.preventDefault();
        alert(ipkdatepicker.error_on_end_date_from_start);
    } else {
        jQuery(this).find('button[alt="Search"]').css("display","none");
        jQuery(this).find('button.searchloader').css("display","inline-block");
        jQuery(window).load(function() {
            jQuery('form.searchform').find('button[alt="Search"]').css("display","inline-block");
            jQuery('form.searchform').find('button.searchloader').css("display","none");
            let target = document.getElementById("target");
            target.scrollIntoView({ block: "start", behavior: "smooth" });
        });
    }
})

内容的提问来源于stack exchange，提问作者Nocktis