Laravel 8表单提交后如何通过JS自动滚动到Contact区块

有两种实用方法可以实现需求，根据你的场景选择即可：

方法一：利用Laravel重定向的Fragment锚点 #

直接在重定向时添加fragment()方法指定锚点，浏览器会自动定位到对应ID的区块：

修改控制器里的重定向代码：

return redirect()->back()
    ->with('info','We sent you an activation code. Check your email and click on the link to verify')
    ->fragment('contact');

这个方法无需额外JS，依赖浏览器原生锚点定位，优点是简单直接。如果页面有固定顶部导航栏，可通过CSS给#contact元素设置顶部外边距来避免遮挡：

#contact {
    scroll-margin-top: 80px; /* 数值对应导航栏高度 */
}

方法二：结合jQuery平滑滚动（适配现有滚动导航） #

如果需要保持和现有jQuery滚动导航一致的平滑效果，可在页面加载时检查表单提交提示，触发滚动：

1. 确保Contact区块有正确的ID：

<section id="contact">
    <!-- 表单内容 -->
</section>

2. 在页面JS代码中添加以下逻辑：

$(document).ready(function() {
    // 检查是否存在Laravel返回的info提示
    if ($('.alert-info').length) {
        // 平滑滚动到contact区块，可调整动画时长（500毫秒）
        $('html, body').animate({
            scrollTop: $('#contact').offset().top - 80 // 减去导航栏高度避免遮挡
        }, 500);
    }
});

这里的.alert-info是Laravel默认的提示消息类名，若你自定义了提示样式，替换成对应的选择器即可。

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