JavaScript实现日历新建事件后可自定义位置的自动滚动

触发逻辑锚点：事件全链路完成（后端入库成功、前端渲染提示完成）后自动执行滚动，避免无效跳转

前置准备 #

给需要定位的表单区块加唯一DOM id，解决“找不到精准滚动位置”的问题，修改calender.php中原有表单代码：

<!-- 给表单增加id标识，后续滚动直接定位这个元素 -->
<form id="daily-entry-form" action="daily-entery.php">
    <button id="Päiväkirjamerkintä" type="submit">Move to kysely sivulla</button>
</form>

核心代码修改 #

找到日历初始化配置里，select事件中新增事件的AJAX请求部分，在success回调内追加滚动逻辑——必须把滚动逻辑放在AJAX成功回调里，不能放在前端本地渲染renderEvent的后面，否则会出现：前端还在等后端入库返回、还没确认事件真的存成功就提前滚动，万一后端报错用户已经滑下去填表单，会出现操作闭环断裂。

修改后的AJAX代码片段：

$.ajax({
    url: 'add-event.php',
    data: 'title=' + title + '&start=' + start + '&end=' + end,
    type: "POST",
    success: function (data) {
        displayMessage("Added Successfully");
        console.log("Added Successfully" + '  '+ title+'  '+ start+'  '+ end+'  ');
        
        // 自动滚动逻辑
        // 1. 获取目标表单的页面位置
        const targetDom = $('#daily-entry-form');
        const targetTop = targetDom.offset().top;
        // 2. 微调偏移量：减去顶部导航的高度，避免表单被固定导航挡住
        const scrollToPosition = targetTop - 80;
        // 3. 平滑触发滚动
        $('html, body').animate({
            scrollTop: scrollToPosition
        }, 300);
    }
});

滚动位置自定义配置方法 #

• 要跳转到其他页面区块：把代码里的$('#daily-entry-form')替换成对应区块的选择器即可，比如要定位到页脚的slogan区域就改成$('.slogancontainer')
• 要直接跳页面底部：把scrollToPosition的取值替换成$(document).height() - $(window).height()，刚好让页面底部铺满可视区
• 要调整滚动距离目标的留白大小：修改targetTop - 80中的数值，数值越大，滚动停的位置离目标元素越远
• 要调整滚动速度：修改animate配置里的300参数，数值越大滚动越平缓，数值越小滚动跳转越快

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