スクロールとは
ボタンをクリックすると、設定しておいた位置まで画面をスクロールさせる機能の作り方と、実装方法を紹介します。WEBサイトは基本的にスクロールバーや、スワイプなどによって上下左右にスクロールさせることができますが、場合によってはこれだけでは十分とは言えません。優先的に見せたい場所にスクロールさせたり、ページの最上部まで戻す便利なUI機能だったり、スクロールが欠かせない場面は増えてきました。
PageTitle[header]
Scroll
⌄
PageTitle[header]
⌃
Scroll
このように上下方向に移動させるスクロールが一般的です。マウスホイールをぐりぐりしないでもよいので楽です。加えて、目的地までエスコートしてくれるため、ユーザーとしても大切な情報を瞬時に把握できる点が魅力と言えます。
スクロールの活用シーン
- 注目してほしい場所にエスコートしたい
- ユーザビリティーを向上させたい
キャンペーン情報のエリアやお問い合わせフォームまで、スクロールして誘導するタイプが多いと思います。注目情報まで何段階かに分けてスクロールするページも見当たります。
ユーザビリティについては、やはり、ボタン一つで行きたいことろに行けるのは利便性が高め。目次と組み合わせるほか、ページトップまでスクロールする機能を設けているサイトは増えています。
スクロールの作り方
スクロール機能はJAVASCRIPTで作ります。スクロールさせるだけならCSSでも可能ですが、多分、狙った位置にとめたりするのは難しいか、無理かもしれません。JAVASCRIPTで組むと数行なので楽です。
今回のソースコードはHTMLでDIV要素を用意しておき、そこに向かってスクロールさせるようにしています。設定を変えるとページ最下部や最上部、別の要素などにスクロールさせられます。
ソースコード
<div id="specer"></div>
<div id="lcs01">
<p id="lcsptit">PageTitle[header]</p><br>
<p id="lcsp"><span>Scroll</span><br>
<span>⌄</span>
</p>
</div>
<div id="lcs02">
<p id="lcsptit">PageTitle[header]</p><br>
<p id="lcsp2">
<span>⌃</span> <br>
<span>Scroll</span>
</p>
</div>
scroll-behavior: smooth;
}
#lcs01{
padding:12px;
height:800px;
width:100%;
}
#lcs02{
padding:12px;
height:1000px;
background-color: #cccccc;
width:100%;
}
#lcsp{
text-align:center;
padding:2vw!important;
width:60px;
height:60px;
max-width:60px;
max-height:60px;
margin:50px auto;
animation:animelsc 1.2s infinite ;
cursor: pointer;
font-weight: 900;
border: 2px white solid;
border-radius: 100%;
background-color: #f5f5f5;
box-shadow: 0 2px 5px 0 #cccccc;
}
#lcs01 p:hover{
color:#0d5597;
}
#lcsptit{
text-align: center;
padding:0px;
width:50px;
margin:5px auto;
width:100%;
}
#lcsp2{
text-align:center;
padding:2vw!important;
width:60px;
height:60px;
max-width:60px;
max-height:60px;
box-sizing:content-box;
margin:50px auto;
animation:animelsc 1.2s infinite ;
cursor: pointer;
font-weight: 900;
border: 2px white solid;
border-radius: 100%;
background-color: #f5f5f5;
box-shadow: 0 2px 5px 0 #cccccc;
}
#lcs02 p:hover{
color:#0d5597;
}
@keyframes animelsc {
0% { transform: translateY(0%); }
50% { transform: translateY(5%); }
100% { transform: translateY(0%); }
}
const linksc = document.getElementById("lcsp");
const linksc2 = document.getElementById("lcsp2");
//ボタンを押したら、scroller()を呼び出します。
linksc.addEventListener('click', function() {
scroller()
});
//上側のボタンの処理
const element = document.getElementById('lcs02');
//↑目標とする要素の設定
function scroller() {
element.scrollIntoView();//これで目的地elementまでスクロールさせます
console.log("ze-no:scroller",element );
}
//下側のボタン用：不要な場合は削除してください
linksc2.addEventListener('click', function() {
scroller2();
});
//下側のボタン用：不要な場合は削除してください
const element2 = document.getElementById('lcs01');
function scroller2() {
element2.scrollIntoView();
console.log("ze-no:scroller",element2 );
}
まとめ
スクロールのご紹介でした。ターゲットのDIV要素を変更するほか、指定座標に飛ばすこともできます。お役に立てれば幸いです。
目次-Index-
