質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Livewire

Livewireは、JavaScriptを記述することなくPHPのみで動的コンポーネントを作成できるライブラリです。Bladeの構文をそのまま使用できるため、Laravelとの相性が良く、Vue.jsやReactよりシンプルに扱うことができます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

解決済

Laravel Livewireでページ遷移したときのスクロール位置を上まで戻したい

PenelopeG
PenelopeG

総合スコア30

Livewire

Livewireは、JavaScriptを記述することなくPHPのみで動的コンポーネントを作成できるライブラリです。Bladeの構文をそのまま使用できるため、Laravelとの相性が良く、Vue.jsやReactよりシンプルに扱うことができます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

1回答

0評価

0クリップ

310閲覧

投稿2022/01/03 22:25

前提・実現したいこと

Laravel初心者です。
今回、Laravel 8 + Livewireでクイズアプリを作っています。
(Larabel 8 + JetStreamのインストールでLivewireを選択しました)

クイズアプリのページ遷移は、以下のような動きです。
問題画面->解答画面->問題画面->解答画面->・・・(問題と解答を繰り返す)・・・->結果点数画面

ステータス変数に応じて画面を切り替え表示しています.

発生している問題・エラーメッセージ

ここで困っているのが、問題画面でスクロールして解答画面に遷移すると、画面トップから表示されず、前の問題画面でのスクロール位置で表示されてしまう点です。

以下で同様の問題をみつけましたが解決には至っていないようです。
scroll to top of page - livewire component - alpine js

Reactでの解決方法は、
・スクロールトップ用のコンポーネントをつくる
・作ったコンポーネントでラップする
となっているので、LivewireでもAlpineJSを使って同じようなことをすれば良いのかと、Livewire公式ドキュメントを確認してみましたが、どうすれば良いか分からずに途方にくれております。

該当のソースコード

views/layouts/quizframe.blade.php

Blade

<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>クイズ</title> @livewireStyles <link href="{{ mix('css/app.css') }}" rel="stylesheet"> </head> <body> <main class="main"> <div class="holder"> @livewire('quiz') </div> </main> @livewireScripts <script src="{{ mix('js/app.js') }}"></script> </body> </html>

views/livewire/quiz.blade.php

Blade

{{-- 問題画面 --}} @if($flow == 'ques') <div class="holder-inner question"> ここに問題を表示(この部分がスクロールが必要になるほど長い) 選択問題で選択肢をクリックで解答画面へ <ul> <li wire:click="checkAnswer(選択肢Aのid)">選択肢A</li> <li wire:click="checkAnswer(選択肢Bのid)">選択肢B</li> </ul> </div> @endif {{-- 解答画面 --}} @if($flow == 'answer') <div class="holder-inner answer"> ここに解答を表示 (この部分も解説文あり、スクロールが必要になるほど長い) @if($num < 5) <button wire:click="showQuestion">つぎの問題へ</button> @else <button wire:click="showResult">結果をみる</button> @endif </div> @endif {{-- 結果画面 --}} @if($flow == 'result') <div class="holder-inner result"> ここに結果を表示 </div> @endif

php

<?php namespace App\Http\Livewire; use Livewire\Component; use App\Models\Question; use App\Models\Choice; class Quiz extends Component { public $flow; // 画面ステータス public function mount() { $this->resetQuiz(); $this->showQuestion(); } public function render() { return view('livewire.quiz') ->layout('layouts.quizframe'); } public function resetQuiz() { // プロパティを初期化 } public function showQuestion() { $this->flow = 'ques'; // 問題を取得 } public function checkAnswer($id) { $this->flow = 'answer'; // 採点 } public function showResult() { $this->flow = 'result'; } }

ご教授いただけると助かります。
どうぞよろしくお願いします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Livewire

Livewireは、JavaScriptを記述することなくPHPのみで動的コンポーネントを作成できるライブラリです。Bladeの構文をそのまま使用できるため、Laravelとの相性が良く、Vue.jsやReactよりシンプルに扱うことができます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。