PHP Laravel POST请求后返回页面自动滚动到表单位置的实现问题

步骤1：给表单区域添加唯一ID #

给包裹错误提示、成功提示、联系表单的外层div添加唯一ID，方便JS定位元素，同时修正原HTML中多个input使用相同ID的冲突问题：

<!-- 给外层div添加唯一id -->
<div id="contactFormWrapper">
    @if (count($errors) > 0)
        <div class="alert alert-danger">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
            </ul>
        </div>
    @endif
    @if ($message = Session::get('success'))
        <div class="alert alert-success alert-block">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong>{{ $message }}</strong>
        </div>
    @endif
    <form method="post" action="sendemail">
        {{ csrf_field() }}
        <div class="form-group">
            <label for="nameInput">Name</label>
            <input type="text" class="form-control" name="name" id="nameInput">
        </div>
        <div class="form-group">
            <label for="emailInput">Email</label>
            <input type="email" class="form-control" name="email" id="emailInput">
        </div>
        <div class="form-group">
            <label for="messageTextarea">Message</label>
            <textarea class="form-control" name="message" id="messageTextarea" rows="8"></textarea>
        </div>
        <div class="form-group">
            <input type="submit" name="send" class="btn btn-secondary" value="Send" />
        </div>
    </form>
</div>

步骤2：修改JS代码，增加页面加载后自动滚动逻辑 #

在原有点击滚动逻辑的基础上，修正原代码变量名不一致的问题，同时增加DOM加载完成的监听，判断当前页面是否存在表单提交后的提示，存在则自动滚动到表单区域：

const contactLink = document.querySelector("#contactLinkItem");
const contactFormWrapper = document.querySelector("#contactFormWrapper");

// 原有点击链接滚动逻辑
contactLink.addEventListener("click", navigateContact, false);
function navigateContact() {
  contactFormWrapper.scrollIntoView({ behavior: "smooth" });
}

// 新增页面加载完成后自动滚动逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 判断是否存在成功/错误提示，存在则说明是表单提交后返回的页面
  const hasSubmitAlert = document.querySelector('.alert-danger, .alert-success');
  if (hasSubmitAlert && contactFormWrapper) {
    contactFormWrapper.scrollIntoView({ behavior: "smooth" });
  }
});

可选优化：更精准的触发逻辑 #

如果不想依赖页面元素判断触发条件，可通过后端闪存标识实现更稳定的判断：

1. 修改控制器代码，返回时携带滚动标识：

function send(Request $request)
{
    $this->validate($request, [
    'name'     =>  'required',
    'email'  =>  'required|email',
    'message' =>  'required'
    ]);

        $data = array(
            'name'      =>  $request->name,
            'email'     =>  $request->email,
            'message'   =>  $request->message
        );
    Mail::to($request->email)->send(new SendMailValidation($data));
    // 新增滚动标识闪存
    return back()->with('success', 'Thank you!')->with('scroll_to_contact', true);
}

2. 在Blade模板中输出标识给JS读取：

<script>
window.shouldScrollToContact = {{ Session::has('scroll_to_contact') || count($errors) > 0 ? 'true' : 'false' }};
</script>

3. 修改JS判断逻辑：

document.addEventListener('DOMContentLoaded', function() {
  if (window.shouldScrollToContact && contactFormWrapper) {
    contactFormWrapper.scrollIntoView({ behavior: "smooth" });
  }
});

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