あんまり使わないような気もするけど。
動作イメージ
LPとか長いページがあったとして、ページ末尾にフォームを仕込んだとする。フォームから問合せしてもらうことをゴールに設定して、使い勝手のことを考えて問合せ種類をselectとかで選べるようにしたとする。ページの途中とかでフォームの場所に遷移するページ内リンクを仕込んだとして、クリックするリンクによってselectの選択内容を変更できるようにしたら便利だったりするよねっていう。
具体的な例を挙げると、リンク「資料請求の申し込み」をクリックしたらフォームまでスムーススクロールして、問合せ種類選択のselectは「資料請求」がselectedになる。リンク「見積もり依頼」をクリックしたら フォームまでスムーススクロールして、問合せ種類選択のselectは「見積もり依頼」 がselectedになる。 そんな感じ。
構想
スムーススクロールと同時にinputを操作する内容を記述すればいい。スムーススクロールは普通に使うものだから共存を考える必要があって、だから汎用的なスムーススクロールに.not()を加えて今回の分を除外して別途作るか、汎用版の中にifを加えて特定条件下で別処理を加えるか。後者のほうが手間が少ないのでいいかなって感じ。
つくる
要点だけ。jQuery3系のライブラリも読ませる。
<a href="#form" class="gotoForm" data-category_value="category01">category01</a>
<a href="#form" class="gotoForm" data-category_value="category02">category02</a>
<section id="form">
<select name="category">
<option value="category01">category01</option>
<option value="category02">category02</option>
</select>
</section>$(function(){
$('a[href^="#"]').click(function(){
if($(this).hasClass('gotoForm')){
const categoryValue = $(this).data('category_value');
$('select[name="category"]').val(categoryValue);
}
var headerHeight = 0;
//headerHeight = $('header').innerHeight();
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top - headerHeight;
$("html, body").animate({scrollTop:position}, 500, "swing");
return false;
});
});一般的なスムーススクロールに条件分岐を足しただけ。
classとかnameとか指定しまくってるんで仕様の理解と書式を求められるんで、忘れるとまた読み解かないといけないからめんどくさいことになる。今更だけど.data(‘category_value’)で条件分岐作ったほうが、classを省けて良かったかもしれない。
ともあれ、これでいうと特定の<select>を指定する内容になるのでオーダーメイドにならざるを得ない。いや、対象のnameもdata属性に入れたらjs側は使い回せるか。でもなぁ。
つくる2
汎用性を高めた。html側に該当のdata属性があれば動作する。
<a href="#form" data-name="category" data-value="category01">category01</a>
<a href="#form" data-name="category" data-value="category02">category02</a>
<section id="form">
<select name="category">
<option value="category01">category01</option>
<option value="category02">category02</option>
</select>
</section>$(function(){
$('a[href^="#"]').click(function(){
const targetName = $(this).data('name');
const targetValue = $(this).data('value');
if(targetName !== 'undefined' && targetValue !== 'undefined'){
$('[name="'+targetName+'"]').val(targetValue);
}
var headerHeight = 0;
//headerHeight = $('header').innerHeight();
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top - headerHeight;
$("html, body").animate({scrollTop:position}, 500, "swing");
return false;
});
});nameとvalueをdata属性に格納してたら、っていう条件分岐になる。欠点というか問題点として、ページ内に複数の<form>があってnameが重複してたらどうすんのっていう点。まああんまりないと思うけど。そういう前提が発生する。
あとはまあ、スムーススクロールとvalue変更は切り離せそうだけど切り離せない。大枠的に「スムーススクロールするやつにdata属性がついてたら」っていう内容になるからね。仕方ないね。
ちょっとした注意
data属性には大文字が使えないので気をつけること。
英数小文字とアンダーバーでやりくりするように。
コメント