← プレビュー一覧に戻る

PR #185: ポイントガイドモーダル スクロール機能プレビュー

📋 実装概要

mypageサイドナビの「ポイント獲得方法モーダル」内リンククリック時のスクロール機能に、ターゲット要素の存在チェックを追加しました。

🔧 修正内容

🎨 UIデザイン

🎯 影響範囲

🎬 デモ: モーダル表示とスクロール機能

ステップ1: ポイント表示をクリックしてモーダルを開く

未交換のポイント

1,234 pt

累計獲得ポイント 5,678pt
回答数 123件
継続日数 45日

※ポイント期限について

💰 アンケート以外でポイントGET →

ステップ2: モーダル内のリンクをクリック

モーダル内の青色のテキストリンクをクリックすると、以下の動作が行われます：

💡 ボタンスタイルからシンプルな青色テキストリンクに変更し、一般的なウェブデザインパターンに準拠しました。

📝 #tabQuestion1: WEBアンケート回答セクション

モーダルから「アンケートを見る」をクリックすると、このセクションにスクロールします。

実際のmypageトップページでは、ここにアンケート一覧が表示されます。

🎮 #tabQuestion2: リサーチDEMO!セクション

モーダルから「リサーチDEMO!を見る」をクリックすると、このセクションにスクロールします。

実際のmypageトップページでは、ここにリサーチDEMO案件が表示されます。

🎤 #tabQuestion3: 座談会・インタビューセクション

モーダルから「座談会・インタビュー案件を見る」をクリックすると、このセクションにスクロールします。

実際のmypageトップページでは、ここに座談会・インタビュー案件が表示されます。

💻 実装コード

修正前のコード（問題あり）

// モーダル内のページ内リンククリック時の処理 $('.pointGuideModalClose').click(function(e) { e.preventDefault(); var target = $(this).data('target'); $('#pointGuideModal').dialog('close'); if (target) { // ⚠️ 問題: ターゲットが存在しない場合、JSエラー発生 $('html, body').animate({ scrollTop: $(target).offset().top // ← undefined.top でエラー }, 500); } });

修正後のコード（存在チェック追加）

// モーダル内のページ内リンククリック時の処理 $('.pointGuideModalClose').click(function(e) { e.preventDefault(); var target = $(this).data('target'); $('#pointGuideModal').dialog('close'); if (target) { var $target = $(target); if ($target.length) { // ✅ ターゲットが存在する場合：ページ内スクロール $('html, body').animate({ scrollTop: $target.offset().top }, 500); } else { // ✅ ターゲットが存在しない場合：mypageトップへ遷移 window.location.href = '/mypage/' + target; } } });

🧪 検証シナリオ

1. mypageトップページ（アンケート一覧ページ）

2. その他のmypageページ（ポイント履歴など）

💰 アンケート・リサーチDEMO！・座談会 0件時の誘導ボックス

実装内容

アンケート、リサーチDEMO！、座談会・インタビューが0件の時に、iResearchリワードへの誘導ボックスを表示します。

📝 WEBアンケート 0件時の表示順序（全体）

気軽に回答してポイントGET！
WEBアンケートは気軽にいつでも答えられるアンケートです！
隙間時間でコツコツポイントをGETしましょう！

🎯 ポイントをたくさん獲得するコツ！
・新規アンケートは発見次第できる限り回答する
・アンケートの依頼メールが来たら必ずチェックをする
・毎日回答する習慣をつける

もっと詳しく知りたい方はこちらをご覧ください。

アンケートを待つ間に...

💰 iResearchリワードでポイントGET →

🎮 リサーチDEMO！ 0件時の表示順序（全体）

アイリサーチで一番ポイントを稼げる！
リサーチDEMO！は企業からオンラインインタビューが受けられるアンケートです。
報酬は30分2,500円～で、応募するだけでも1ptGET！

※現在リサーチDEMO！の募集はありません※

【毎日対象のかたにインタビュー依頼をお送りしています！本日アンケートがない時は、また明日チェックしてくださいね！】

🎯 事前アンケートに当選するコツ！
・数分で終わることも多いので、まずは30件以上の申し込みを目安にどんどん申し込んでみましょう。
・記述の回答はできるだけ丁寧に回答しましょう。当選確率が上がります。
・リサーチDEMO！は予約制なので、ご自分の都合に合わせて参加できます。突然電話がかかってくるようなことはありません。

💬 実際に参加された方の声
✓ 「気軽にやることができるのでおすすめです」（40代女性）
✓ 「和やかな雰囲気で、答えにくいことはなかった」（30代男性）
✓ 「不安なくスタートできると思います！」（30代男性）

ヒント💡　リサーチDEMO！は登録された属性情報をもとに、対象のかたに案内をお送りしています！属性情報の登録・更新はこちらから

オンラインインタビューの詳細はこちら！

募集を待つ間に...

💰 iResearchリワードでポイントGET →

🎤 座談会・インタビュー 0件時の表示順序（全体）

高報酬のアンケート・インタビューだらけ！
一番報酬が高いインタビュー・座談会・事前調査です。
抽選式で、事前アンケートに答えることで応募が完了します！ 応募するだけでも1ptGET！

※現在インタビュー・座談会の募集はありません※

【毎日対象のかたにインタビュー依頼をお送りしています！本日アンケートがない時は、また明日チェックしてくださいね！】

ヒント💡　事前アンケート！は登録された属性情報をもとに、対象のかたに案内をお送りしています！属性情報の登録・更新はこちらから

募集を待つ間に...

💰 iResearchリワードでポイントGET →

💻 誘導ボックスの実装コード

<div class="mt-2 p-3 bg-gray-50 rounded text-center"> <p class="text-sm mb-2">アンケートを待つ間に...</p> <a href="{$app.ow_url|escape}" target="_blank" class="inline-block px-6 py-2 rounded" style="background-color: #FE813B; color: white; text-decoration: none;"> 💰 iResearchリワードでポイントGET → </a> </div>

🔗 関連リンク

💡 補足情報

sidenavi.tplは多くのmypageテンプレートで使用される共通コンポーネントのため、この修正によりすべてのmypageページで安全にモーダル機能が動作します。