こんにちは!セミマサです。
JavaScriptを使ってスムーズスクロールを実装してみたので作り方をまとめておきます!
デモサイト
今回のデモサイトになります。ChromeとFirefoxで動作確認済み。
HTML
<section>
<div class="jump-box">
<a class="jump">リンク先1へ</a>
<a class="jump">リンク先2へ</a>
<a class="jump">リンク先3へ</a>
<a class="jump">リンク先4へ</a>
<a class="jump">リンク先5へ</a>
</div>
<div class="space"></div>
</section>
<section>
<h2 class="link">リンク先1</h2>
<a class="top">topへ戻る</a>
<div class="space"></div>
</section>
<section>
<h2 class="link">リンク先2</h2>
<a class="top">topへ戻る</a>
<div class="space"></div>
</section>
<section>
<h2 class="link">リンク先3</h2>
<a class="top">topへ戻る</a>
<div class="space"></div>
</section>
<section>
<h2 class="link">リンク先4</h2>
<a class="top">topへ戻る</a>
<div class="space"></div>
</section>
<section>
<h2 class="link">リンク先5</h2>
<a class="top">topへ戻る</a>
<div class="space"></div>
</section>
今回のHTMLです。
・リンク元はjumpクラスを指定します。
・リンク先となる場所にはlinkクラスを指定しておきます。
・topクラスを指定した要素は後述するトップへ戻るスクリプト用です。
CSS
.space{
height: 50vh;
}
.jump-box{
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
.jump,.top{
cursor: pointer;
padding: 8px 8px 8px 16px;
}
.jump:hover,.top:hover{
opacity: .7;
}
今回のCSSです。
JavaScript
スクロール用スクリプト
const link_list = document.querySelectorAll('.link');
const jump_list = document.querySelectorAll('.jump');
const Destination = e =>{
let num;
e.target.classList.add('clicked');
for(let i = 0; i < jump_list.length;i++){
if(jump_list[i].classList.contains('clicked')){
num = i;
jump_list[i].classList.remove('clicked');
}
}
Scroll(num);
}
const Scroll = number =>{
let Destination_top = link_list[number].offsetTop;
window.scrollTo({
top:Destination_top,
behavior: "smooth"
});
}
for(let i = 0;i < jump_list.length;i++){
jump_list[i].addEventListener('click', Destination,false);
}
今回のメインとなるスクリプトです。
・ querySelectorAllを使ってlinkクラスのリストをlink_listへ、jumpクラスのリストをjump_listへ格納しています。
・for文を使ってjump_list内の 各要素にクリックイベントを追加しています。
Destination関数
スクロール先を判定するスクリプトです。
①:クリックされたjumpクラスを持つ要素にclickedクラスを付与します。
②:for文を用いてクリックされた要素が何番目か調べます。※clickedクラスの有無で判定します。
③:Scroll関数に②で取得した番号を渡します。
Scroll関数
スムーズスクロールを行う関数です。
①:Destination関数から渡された番号に対応したリンク先の位置を取得し、Destination_topに格納します。
②:scrollTo関数を使ってスクロールさせます。移動先はDestination_topを指定します。behaviorにsmoothを指定するとスムーズスクロールになります。
トップに戻るスクリプト
const top_list = document.querySelectorAll('.top');
const TopTo = ()=>{
window.scrollTo({
top:0,
behavior: "smooth"
});
}
for(let i = 0;i < top_list.length;i++){
top_list[i].addEventListener('click', TopTo,false);
}
スクロール用スクリプトと仕組みはだいたい同じです。
・ querySelectorAllを使ってtopクラスのリストをtop_listへ格納します。
・for文でtop_list内の 各要素にクリックイベントを追加します。
・scrollTo関数を使ってスクロールさせます。移動先を0にしてあげればOK。
おわりに
今回はスクロール先・スクロール元が増えても対応できるようなスムーズスクロール用スクリプトを書いてみました。