-
回答完了後に自動で下にスクロールさせたい
トピックス by
1792 pt
2023年9月12日 11:46
366
PV
【Widget名】
アンケート選択状態に対応したコンテンツを表示（スクロール・最後の質問に回答すると下部表示）※要javascript
【修正したいこと】
最後の質問に回答したときに、自動で下にスクロールされるよう修正したいです。
【参考ページ】
-
1 コメント
-
最後の設問および最終コンテンツがWidgetの仕様に沿っていないために生じております。
Widgetの仕様通り、最後の設問および最終コンテンツも他の設問と同じHTML構成にする事で、ご要望通りの動作となります。
修正の流れとしましては下記になります。
- 最後の設問に設定されている ページ内リンクの a タグを削除
- 矢印のHTMLを設問と同じHTML内に設置
- お好みに応じて、横線を削除してデザインを整える
1. 最後の設問に設定されている ページ内リンクの a タグを削除
[ 修正前 ]
<a href= "#heading1" draggable='false'> ※ここを削除する
<div class="questionArea js-form-radio">
<h2 class="title">ボディアーキのどこに魅力を感じますか？</h2>
... 省略 ...
<a/>※ここを削除する[ 修正後 ]
<div class="questionArea js-form-radio">
<h2 class="title">ボディアーキのどこに魅力を感じますか？</h2>
... 省略 ...
</div>2. 矢印のHTMLを設問と同じHTML内に設置
現在Widget外に設置されている矢印のWidgetを、設問と同じHTML内に設置します。
CSSもまるっと切り取ってアンケートのCSSの一番下に挿入してください。
なお、コードを移した後は、もともと設置していた矢印のWidgetは削除してください。
<div class="questionArea js-form-radio">
... 設問1 ...
</div>
<div class="questionArea js-form-radio">
... 設問2 ...
</div>
<div class="questionArea js-form-radio">
... 設問3 ...
</div>
<div class="questionArea js-form-radio">
... 設問4 ...
</div>
<div class="questionArea js-form-radio"> ※追加箇所ここから
<div class="cp_arrows">
<div class="cp_arrow cp_arrowfirst"></div>
<div class="cp_arrow cp_arrowsecond"></div>
</div>
</div> ※追加箇所ここまで
</form>
</div>3. お好みに応じて、横線を削除してデザインを整える
ステップ2までHTMLを編集すると、矢印の下に横線が発生します。
この横線を削除したい場合は、CSS内を以下のように調整してください。
[ 修正前 ]
.question-reveal-scroll .questionArea {
margin-bottom: 30px;
padding-bottom: 30px;
display: flex;
flex-direction: column;
border-bottom: 1px solid #cccccc; ※none に変更
}
[ 修正後]
.question-reveal-scroll .questionArea {
margin-bottom: 30px;
padding-bottom: 30px;
display: flex;
flex-direction: column;
border-bottom: none;
}