Laravel表单提交后返回首页，能否记住滚动条位置？

当然可以实现啦！结合你正在使用的Laravel框架，我给你整理了两种实用方案，都能帮你搞定表单提交返回首页后记住滚动条位置的需求👇

这种方式需要后端配合，把滚动位置存在Session里，返回首页时再读取定位：

1. 给表单添加滚动位置隐藏字段
   在你的表单里新增一个隐藏输入框，用来提交时携带当前滚动位置：

<form method="post" action="{{Route('sites.liking')}}">
    <input name="_token" value="{{csrf_token()}}" type="hidden">
    <input type="hidden" value="{{$meme->likes}}" name="likes">
    <input type="hidden" value="{{$meme->id}}" name="likeid">
    <input type="hidden" value="{{Auth::user()->name}}" name="sendeduser">
    <!-- 新增滚动位置隐藏字段 -->
    <input type="hidden" name="scroll_position" id="scrollPosition">
    <button class="linking">+ {{$meme->likes}}</button>
</form>

2. 提交前用JS获取滚动位置
   给表单绑定提交事件，把当前页面的滚动距离存入隐藏字段：

document.querySelector('form').addEventListener('submit', function() {
    document.getElementById('scrollPosition').value = window.scrollY;
});

3. 后端控制器存储滚动位置
   在处理sites.liking路由的控制器方法里，把滚动位置存入Session：

public function liking(Request $request)
{
    // 先处理你的表单逻辑（点赞、数据更新等）
    // ...

    // 存储滚动位置到Session
    if ($request->has('scroll_position')) {
        session()->put('scroll_position', $request->scroll_position);
    }

    // 重定向回首页
    return redirect()->route('你的首页路由名称');
}

4. 首页视图读取并定位
   在首页的blade视图里，添加一段JS，页面加载时读取Session里的位置并滚动：

@if(session()->has('scroll_position'))
    <script>
        window.addEventListener('load', function() {
            // 滚动到之前的位置
            window.scrollTo(0, {{ session('scroll_position') }});
            // 用完清除Session，避免下次打开首页还自动滚动
            {{ session()->forget('scroll_position') }}
        });
    </script>
@endif

如果不需要跨设备同步，纯前端就能搞定，不需要后端改动：

1. 提交表单前记录滚动位置
   同样给表单绑定提交事件，把滚动位置存在浏览器的localStorage里：

document.querySelector('form').addEventListener('submit', function() {
    localStorage.setItem('scrollPosition', window.scrollY.toString());
});

2. 首页加载时读取并滚动
   在首页的JS代码里，页面加载完成后读取localStorage的位置并定位：

window.addEventListener('load', function() {
    const savedPos = localStorage.getItem('scrollPosition');
    if (savedPos) {
        window.scrollTo(0, parseInt(savedPos));
        // 读取后移除存储，避免影响后续正常访问
        localStorage.removeItem('scrollPosition');
    }
});

小提示 #

两种方案各有侧重：后端Session方案适合需要跨设备或者必须由服务端控制的场景；前端localStorage方案更简单快速，适合单设备的普通需求，你可以根据自己的实际情况选择~

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