Question

表单提交并返回主页后是否可以记住滚动条位置？

这是我的表单：

<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">
  <button class="linking">+ {{$meme->likes}}</button>
</form>

路由：

Route::post('/', ['uses' => 'LikingComments@liking', 'as' => 'sites.liking']);

控制器功能：

public function liking(Request $request) {
  //Function guts
  return redirect('/')->with('status', $id);
}

我尝试了几个脚本，但它总是滚动到页面顶部。

是否有某种方法可以返回页面的同一位置？

Answer 1

您可以使用localStorage或sessionStorage来保存当前滚动位置（scrollTop）。然后在重新加载上一页时将其分配给scrollTop。

Answer 2

好的，我已经通过在元素中添加id，新路由和更改主函数来解决这个问题。

<div id="{{$meme->id}}">
 <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">
  <button class="linking">+ {{$meme->likes}}</button>
 </form>
</div>

更改功能：

public function liking(Request $request)
{
 //Function guts


 return redirect()->action('LikingComments@indexliking', ['id' => $id])->with('status', $id);
}

路由：

Route::get('/#{id}' , ['uses' => 'LikingComments@indexliking', 'as' => 'indexliking']);

它不能很好地工作但对我来说没问题。感谢您的回答，特别是@kerbholz

Answer 3

我有一个类似的问题，并像Piotr一样解决了。有点晚了，但无论如何，也许它可以帮助别人

我的退货包含一个标识符，在我的情况下是组件ID

return redirect(url()->previous().'#component'.$component->id)

并且我的视图为每个条目创建了可识别的html标签

<tr id="component{{ $component->id }}">

如果确实需要完全相同的位置，则应考虑将滚动位置保存在本地存储中，并在重定向回后检索它。

在laravel中提交表单后，请记住滚动条位置

3 个答案: